JavaScript OO concept / using Closures

js_comprehension.js

/**
*   Reference:    http://pivotallabs.com/javascript-constructors-prototypes-and-the-new-keyword/
*   Description:  Java-like OO concept implemented in JavaScript.
*/

//init __superclass @Animal as form of JavaScript function.
var Animal = function(){};

//function works as __constructor either. (**has to have same-named function!)
var Animal = function Animal( color ){ this.color = color };

//you can use prototype to declare member methods or variables.
Animal.prototype.isOnEarth = function(){ return true; };
Animal.prototype.canMove = true;
Animal.prototype.color = "no color yet";

//or shorthand syntax (prototype is object.)
Animal.prototype = {
  isOnEarth: function(){ return "yes, I am on Earth" },
  canMove: true,
  color: "no color yet" //how does it work?
}

//init __subClass @Mamal.
var yellowMamal = function(){};

//equals to 'Mamal extend Animal'
yellowMamal.prototype = new Animal("yellow"); //gives color parameter. yellow Animal!

//initiate object.
var human = new yellowMamal();
console.log(human.color); //yellow
console.log(human.canMove); //true
console.log(human.isOnEarth()); // "yes, I am on Earth"

/**
*   simpler, more JavaScript-ish way to make objects, using Closure.
*   @param object
*/
var copyObject = function(parent) {
  var F = function() {}; // initiate function F.
  F.prototype = parent; // injects parent object to F as prototype.
  return new F(); //returns object by F. (Which has same properties like parent!)
}
//what is your prefrences of beer and chicken?
var parentObj = { beer: 'good', chicken: 'hellyeah', beerAndChicken: 'yeeeeehaww!' };
//copy objects
var child_1 = copyObject(parentObj);
var child_2 = copyObject(parentObj);
var child_3 = copyObject(parentObj);
console.log(child_1); // same as parentObj.
console.log(child_2); // same as parentObj.
console.log(child_3); // same as parentObj.

//overrides parent value and see what's happen!
parentObj.beer = 'soso';
console.log(child_1);console.log(child_2);console.log(child_3);  // same as parentObj.
//see? so basically child 1,2,3 is pointing to parentObj and coupled.

//but, I like beer much!
child_1.beer = 'effing good!';
//what? ain't give a damn. 
parentObj.beer = 'bad';
console.log(child_1);console.log(child_2);console.log(child_3);
//child_1 still has the value overrides; this means overidden value will be preserves no matter parentObj get updated.
//That's all!


/** ---------------------------------------------------------------------------------------
*   Reference:    http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/
*                 http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/
*                 http://stackoverflow.com/questions/111102/how-do-javascript-closures-work/6472397#6472397
*   Description:  Understanding how closure works in JavaScript.
*/

//Pros of adopting JavaScript closures:
//  "closures can be used to keep private data private from outside code."

function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i++) {
        theCelebrities[i]["id"] = function (j)  { // the j parametric variable is the i passed in on invocation of this IIFE
            return function () {
                return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array
            } () // BY adding () at the end of this function, we are executing it immediately and returning just the value of uniqueID + j, instead of returning a function.
        } (i); // immediately invoke the function passing the i variable as a parameter
    }

    return theCelebrities;
}

var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];

var createIdForActionCelebs = celebrityIDCreator (actionCelebs);

var stalloneID = createIdForActionCelebs [0];

console.log(stalloneID.id); // 100

var cruiseID = createIdForActionCelebs [1];
console.log(cruiseID.id); // 101