JS, Understanding Weird parts-3 (sec 5, OOP & Prototype)

var foo = new Person();

“new” is an operator in JavaScript. So, when we say “new”, something special happens. Immediately an empty object is created and invokes the function. When the function is called, in this case it changes the pointer of “this” to the newly created object. And the function before which “new” operator is used, does not return a value. JS engine will return the object that was created by “new” operator.

function person(firstName, lastName){
    console.log('creating object');  
    console.log(this);
 
    this.firstName = firstName;
    this.lastName = lastName;
    this.getFullName = function () {
           return this.firstName + " " + this.lastName;
    };
  
    console.log('finished creating object');
    console.log(this);
};

var abir = new person("abir", "biswas");

If the constructor function returns any special formatted object, that will be assigned to the newly created object.

function person(firstName, lastName) {
    console.log('creating object');
    console.log(this);

    this.firstName = firstName;
    this.lastName = lastName;
    this.getFullName = function () {
        return this.firstName + " " + this.lastName;
    };

    return {greeting: "hello ... "};
};

var abir = new person("abir", "biswas");
console.log( abir );

But if we dont return anything, JS engine will say like “you invoked this function with ‘new’ operator so I’m going to give you back the object that was set as the ‘this’ variable before the function started executing”. So, this is letting us construct an object by a function.

function person(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;
};

person.prototype.getFullName = function () {
	return this.firstName + " " + this.lastName;
};

var abir = new person("abir", "biswas");

for (var prop in abir) {
	console.log(prop + ": " + abir[prop]);
}

console.log("-----------------------");

for (var prop in abir) {
	if (abir.hasOwnProperty(prop)) {
		console.log(prop + ": " + abir[prop]);
	}
}

Each and every function has a prototype property. It is only used when we construct an object by using that function by “new” keyword. The prototype property of a function is not prototype of that function.  The “new” operator creates an empty object and it sets the prototype of that empty object to prototype property of the function that is called.

Here, i created an object named “abir”. So, the “new” operator sets the prototype of “abir” to be the prototype property of person function.

If we forgot to put “new” operator in front of the constructor function, then JS engine will not understand our intention of creating an object, and hence as the constructor function doesn’t return any value, it sets ‘undefined’ the the var “abir” .

var abir = person("abir", "biswas");    // sets 'undefined' to the var abir.

Built In Function Constructor: There are some built in function constructor in JS. like

var str = new String("This is a string object");

By using new infront of String we create a new string object and set that object’s prototype to the String’s prototype property. String’s prototype property has methods like indexOf, length, slice, splice etc methods and hence we can access the methods for newly created string also.

!! JavaScript wont convert a number to object automatically…

Important:: any array is an object constructed by invoking function “Array”. Also, each prototype of each array is pointed to the prototype property of “Array”. So, we should be careful in adding properties to the prototype property of “Array”.

var arr = ["sajib", "bulbulil", "abir"];

Array.prototype.future = "usha";

for( var prop in arr){
    console.log( prop + ": " + arr[prop]);
}

console.log("--------------");

for( var i = 0; i < arr.length; i++){
    console.log( arr[i] );
}

Using forin loop is not recommended to iterate through arrays. As all arrays are objects, we can accidentally we can iterate down through prototypes. Using normal for loop is recommended.

Pure prototypal inheritence:

Function constructors were created to mimic other languages those do not implement prototypal inheritence. Admitting, JS is based on prototypal inheritence we can use ‘object.create’ approach.

This “Object.create” might not supported in some older browser, in that case we might use polyfill (code that adds a feature that engine lacks).

var person = {
	firstName : "default",
	lastName : "default"
};

var abir = Object.create( person );

abir.firstName = "Abir";

console.log( abir );

Main features of two most popular methods of creating objects in JavaScript:

var person = {
	firstName : "default",
	lastName : "default"
};

var abir = Object.create( person );    
abir.firstName = "Abir";

/****************************************
* abir =proto=> person =proto=> Object
*****************************************/

function human(name, age){
	this.name = name;
	this.age = age;
}
human.prototype.greet = function(){
	return "hello world";
};

var sajib = new human("sajib", 33);

/****************************************
* sajib =proto=> prototype property of human function (human.prototype) =proto=> Object
* 
* thats why, sajib.__proto__ === human.prototype
*****************************************/

** sajib.__proto__ is pointing to human.prototype. Both are same object.