Created
July 16, 2015 11:56
-
-
Save OriginUnknown/edc4d3e038d9193905d2 to your computer and use it in GitHub Desktop.
JavaScript - Understanding Context {this} - Object Constructors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>"this" context explained - Object Constructors</title> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
/* | |
* * "this" context and object constructor functions - | |
* * like classes but they ain't! | |
*/ | |
//Create an object constructor | |
function User ( fname, lname, eml ) { | |
this.firstname = fname; | |
this.surname = lname; | |
this.email = eml || ""; | |
} | |
/* | |
* * Adding methods to the prototype object allows methods be shared [inherited] | |
* * across all User object instances. | |
*/ | |
User.prototype = { | |
"getMyName": function () { | |
return this.firstname + "_" + this.surname; | |
}, | |
"getEmailAddress": function () { | |
return "User constructor email is " + this.email; | |
} | |
}; | |
/* | |
* * Object constructors are functions but when call with the "new" keyword, | |
* * "this" points to the object instantiating it, which in this example, | |
* * is tilly and brad. | |
*/ | |
var tilly = new User( "Tilly", "Lee", "tlee@gmail.com" ), | |
brad = new User( "Brad", "Jenkins", "bradjenkins@hotmail.com" ); | |
/* | |
* * The "new" also returns an object instance of the User object | |
* * to the object instance, making all properties and methods | |
* * accessible | |
*/ | |
console.log( tilly.firstname );//returns "Tilly" | |
console.log( brad.surname );//returns "Jenkins" | |
console.log( brad.getMyName() );//returns "Brad_Jenkins" | |
/* | |
* * [Extension] | |
* * You can add new properties and methods to the User object which | |
* * are automatically inherited by object instances | |
*/ | |
User.prototype.getCompanyName = function () { | |
return "Google Inc"; | |
}; | |
console.log( tilly.getCompanyName() );//returns "Google Inc" | |
console.log( brad.getCompanyName() );//returns "Google Inc" | |
/* | |
* * And you can add properties and methods exclusively to | |
* * object instances as they are added to the object instance | |
* * itself and NOT the object prototype of its parent | |
*/ | |
tilly.starsign = "Leo"; | |
tilly.getStarsign = function () { | |
return this.starsign; | |
}; | |
console.log( tilly.getStarsign() );//returns "Leo" | |
//console.log(brad.getStarsign());//returns "Uncaught TypeError: brad.getStarsign is not a function" | |
/* | |
* * [Polymorphism] | |
* * You can also change the implementation of a method | |
* * exclusively on any object instance without affecting | |
* * the parent and other instances of that parent. | |
* * | |
* * If you know that other object instances with require | |
* * the same altered method, create another constructor | |
* * object derived from its parent and implement the | |
* * alternate method there to avoid duplicate code | |
*/ | |
brad.getCompanyName = function () { | |
return "Facebook Inc"; | |
}; | |
console.log( tilly.getCompanyName() );//returns "Google Inc" | |
console.log( brad.getCompanyName() );//returns "Facebook Inc" | |
/* | |
* * {Pro}: "this" context is bound to the object instance; | |
* * {Pro}: Good for apps which require multiple objects to work with; | |
* * {Pro}: Methods are easily shared as each instance inherits it's | |
* * own copy of methods as listed in the object.prototype object; | |
* * {Pro}: Each object instance can change the implementation of its | |
* * own method without affecting other object instances | |
* * {Pro}: If a method or property is added, removed or altered at | |
* * the parent object, all instance objects are automatically updated | |
* * with the new method; | |
* * {Con}: All properties and methods are accessible which means | |
* * that properties and methods can easily be overridden | |
* * {Con}: Unable to share private variables [unless you do prepend an | |
* * underscore to the property name -> _this.propName] | |
*/ | |
/* | |
* * What happens when the "new" keyword is omitted when instantiating User? | |
*/ | |
var kim = User( "Kim", "Tran", "kimtran@yahoo.com" );//Uh Oh no "new" keyword | |
console.log( kim ); | |
/* | |
* * Result, executes alright but, returns undefined. kim did however | |
* * create firstname, surname, and email variables but they've been | |
* * added to the global window. | |
* * Why is this bad? If global functions refer to such variables and | |
* * fail to use the "var" keyword, the result of these functions may | |
* * not be the outcome you expect and will cause confusion | |
*/ | |
console.log( firstname );//returns "Kim" | |
console.log( surname );//returns "Tran". | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment