javascript prototype

A function's prototype is the object instance that will become prototype for all objects created using this function as a constructor. For example when you define following function a prototype property is created on Foo, which you should be able to access Foo.prototype and it will be initialized object (like {}) with no property.

 
 function Foo(){
   console.log("js will create prototype property on Foo which will be initialized as empty object {} ");
 }

You can add property to the prototype object of Foo Foo.prototype.myFirstName = "Sam" Now when you create object using constructor function then constructor function prototype will become object prototype

 
 var foo = new Foo();
 var bar = new Foo();
 Foo.prototype.myLastName = "Adam"

So following should return true

 
 console.log(bar.__proto__=== Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype);

You can add more properties to Foo prototype

 
 Foo.prototype.age = 5

Now lets say you update functions prototype like this. Here you changing pointer of Foo.prototype where as in the above case pointer was same, you just added new property to that object.

 
 Foo.prototype = {myName: "Tom"}

Doing so will change return value of following to false as bar and foo prototype is still pointing to prototype object which was there on Foo when foo and bar was created.

 
 console.log(bar.__proto__=== Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype);

So now when you create new Foo object this will get new prototype

 
 var baz = new Foo();
 console.log(baz.__proto__=== Foo.prototype);

There is a chain of prototype. Following will return true

 
 console.log(bar.__proto__.__proto__=== Object.prototype);
 console.log(bar.__proto__.__proto__.__proto__=== null);

When you try to access foo.myFirstName, javascript looks first if myFirstName is property of foo or not, if not then it looks in the prototypal chain and return it. So in the above case foo.hasOwnProperty('age') will return false where as foo.__proto__.hasOwnProperty('age') will return true. Also you can check by looking at all the keys Object.keys(foo

). When you create an object with new keyword following happens

  
 function Foo(name){
  var someInteger = 1;
  this.name = name;
  return 5;
 }
 var foo = new Foo('John');

A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its "this" parameter. For all other functions, the default return value is undefined. So in the above case foo will be assigned like this

 
  Foo {
   name: 'john'
  }

foo object will not see someInteger and its return value Function prototype (Foo.prototype) object is passed to the __proto__ property of the object so this will return true

 
  console.log(foo.__proto__=== Foo.prototype); //will return true

When you create an object by Object.create() only prototype is set

 
 var foo = Object.create(Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype); //will return true
 console.log(typeof foo.name1 === 'undefined'); //will return true
 console.log((foo.name1 === undefined ); //will return true

When you create an object by object literal {} then Object prototype is set prototype of the object

  
 var foo = {firstName: 'John', lastName: 'singh'};
 console.log(foo.__proto__ ===Object.prototype); //will return true