JavaScript - Object Creation

[ECMAScript 5]

Prototype

__proto__ is the actual object that is used in the lookup chain to resolve properties and methods etc

prototype is the object that is used to build __proto__ when you create an object with new:

__proto__ is available on both object instance &  function instance.

prototype is available only on function instance.

Foo(){}
foo = new Foo();

foo.__proto__ === Foo.prototype => true

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

Scope chain VS Prototype Chain

scope chain - The reference to the variable is without dot notation ( var x = variable )
prototype chain - The reference the variable is with dot notation ( var x = obj.variable )

Factory Pattern

• objToReturn = new Object() is done explicitly
• all properties / methods are added to this Object
• return is used 
• functions are duplicated for each instance. 100 instances = 100 function objects. It can be moved out but the look disconnected.
• instanceof and typeof doesn't work

function objectFactory( param1, param2 ){

    obj = new Object();

    obj.propA = param1;

    obj.propB = param2;

    obj.aMethod = function(){

        // function definition

    }

    return obj;

}

objA = createObject( "A", "AA" );

objB = createObject( "B", "BB" );

Constructor Pattern

• No object created inside the constructor
• No return statement
• Object automatically before the very first line.
• Still duplicates the functions 
• Allows instanceof operator to work

function Car( doors, colour ){

    this.doors = doors;

    this.colour = colour;

    this.getDoors = function(){

        return this.doors;

    }

}

var redCar = new Car( 3, "RED" );

var blueCar = new Car( 5, "BLUE" );

Prototype Pattern

• Empty constructor is used NewType(){}
• All properties/ functions are added to prototype
• Shared objects such as Arrays are manipulated for for all instances even if one instance updates it.
• Allows instanceof operator to work

function Car() {};

Car.prototype.doors = "3";
Car.prototype.colour = "BLUE";

Car.prototype.getDoors = function (){

    return this.colour;

}

var redCar = new Car();// both have same values

var blueCar = new Car();// both have same values

Hybrid Constructor / Prototype Pattern

• Properties created using Constructor pattern
• Functions added to prototype - NewType.prototype.anyFunc = func() {}
• Functions are not encapsulated in the Constructor

function Car( doors, colour ){

    this.doors = doors;

    this.colour = colour;

}

Car.prototype.getDoors(){

    return this.doors;

}

var redCar = new Car( 3, "RED" );

var blueCar = new Car( 5, "BLUE" );

Dynamic Prototype Pattern

• Prototype assignment happens within the constructor function
• Assignment is conditional - Only if function not created already is it added to prototype.
• Variable maintained NewType._initialized to hold state if function added to prototype.

function Vehicle( doors, colour ){
    this.doors = doors;
    this.colour = colour;

    if( !Vehicle.__initialized ){

        console.log( "Adding the function ");
        Vehicle.prototype.getColour = function(){
            return this.colour;
        };
    }

    Vehicle.__initialized = true;
}