Untitled

<!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>