OriginUnknown/ThisContext_ObjectConstructor.html

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