OriginUnknown/ThisContext_ObjectLiterals.html

## ThisContext_ObjectLiterals.html
<!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>
	<!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>