Last active
August 29, 2015 14:25
-
-
Save OriginUnknown/5b9a91731b9d6a3b0bee to your computer and use it in GitHub Desktop.
JavaScript - Understanding Context {this} - Object Literals and global functions
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 literals</title> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
/* | |
* * 1. "this" context and object literals | |
* * When creating objects via object literals, "this" context is | |
* * bound to the object instantiating it which, in this example | |
* * is "user". | |
* * {Pro}: Object literals are good for containing data | |
* * {Con}: Object properties are mutable (can be changed) | |
*/ | |
var user = { | |
"id": 24679613, | |
"firstname": "Chris", | |
"lastname": "Anderson", | |
"email": "canderson@gmail.com", | |
"getFullname": function () { | |
return this.lastname + " :: " + this.firstname; | |
}, | |
"getEmail": function () { | |
return this.email; | |
} | |
}; | |
console.log( user.getFullname() );//returns "Anderson :: Chris" | |
console.log( user.getEmail() );//returns "canderson@gmail.com" | |
user.firstname = "Peter"; | |
console.log( user.getFullname() );//returns "Anderson :: Peter" | |
/* | |
* * 2. "this" context and global functions | |
* * Whether it be function expressions of function statements | |
* * functions created in global scope will most likely have | |
* * their "this" context point to the global window object by | |
* * default. | |
*/ | |
//Example #1: function expression | |
var whatsMyName = function () { | |
return this.firstname + "||" + this.lastname; | |
}; | |
console.log( whatsMyName() ); | |
/* | |
* * returns "undefined||undefined" as firstname and lastname | |
* * do not exist in the global scope | |
*/ | |
/* | |
* * Example #2: Assigning the user.getFullname method to a function | |
* * expression in the global scope | |
*/ | |
var whoAmI = user.getFullname; | |
console.log( whoAmI() ); | |
/* | |
* * returns "undefined::undefined" for the same reason | |
* * even though it's pointing to the user.getFullname method | |
*/ | |
//Example #3: function declarations | |
function rememberMe () { | |
return "Your full name is " + this.lastname + " -- " + this.firstname; | |
} | |
console.log( rememberMe() ); | |
/* | |
* * returns "Your full name is undefined -- undefined" for the same reason | |
*/ | |
/* | |
* * {Pro}: globally accessible from anywhere in your script | |
* * {Con}: Creating the needed variables in the global scope is NOT | |
* * ADVISED as it pollutes the global object; its easy to forget the | |
* * declaration of a variable already created earlier in a script | |
* * only to accidentally re-declare it somewhere else and override | |
* * it's initial value. Even worse still worse with implied globals | |
* * (e.g. when you say someVar = someValue without declaring someVar | |
* * with the var keyword). | |
* * {Con}: Secondly performance which, although slight, does slow | |
* * the look up of a global variable compared to a local one. | |
* * | |
* * Solution: DON'T CODE THIS WAY!!! | |
* * But just in case someone does and such functions need to be used | |
* * the bind() method can be used to provide context to each of these | |
* * functions provided the object being bound has the properties | |
* * required by the function | |
*/ | |
//All three variables below return new functions with added context {user} | |
var bindWhatsMyNameToUserLiteral = whatsMyName.bind( user ); | |
var bindWhoAmIToUserLiteral = whoAmI.bind( user ); | |
var bindRememberMeToUserLiteral = rememberMe.bind( user ); | |
console.log( bindWhatsMyNameToUserLiteral() );//returns "Peter//Anderson" | |
console.log( bindWhoAmIToUserLiteral() );//returns "Anderson :: Peter" | |
console.log( bindRememberMeToUserLiteral() );//returns "Your full name is Anderson -- Peter" | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment