Tuesday, April 11, 2017

Prototype in detail [ taken from stackoverflow ]

General Idea : ------------------------------------------------------------------------------------------------------------

Instances use __ proto __ to access the prototype of its constructor function.


Prototype is a property of function object.Whenever a function is declared it comes with a prototype property.If we declare a function called Parent_func like the following (it is also called constructor function):
function Parent_func(){

       //..................

 }
Constructor functions ships with a prototype property called Parent_func.prototype.It is an object .So it means we can add new method and properties on it.It has a interface like the following:
Parent_func.prototype = {
       constructor:Parent_func,
       //other properties
}
If we create a new instance of that constructor function, newly created instance will have a method called __ proto __ which will be assigned the prototype of the constructor function.
var parent1 = new Parent_func();
here parent1 is an instance of Parent_func.So parent1 will have a __ proto __ and it will be assigned Parent_func.prototype.
parent1.__ proto __ = Parent_func.prototype
Thus we can say instances use __ proto __ to access the prototype of the constructor function.
Additional Information : ------------------------------------------------------------------------------------------------
(__ proto __) in inheritance (parent-child relationship) :

Say we have another constructor beside parent called Child().
function Child(){
       .................
}
As Child is also a constructor, it too has a prototype property.We want child to inherit from Parent_func.We can do this using Child.prototype 
Child.prototype = new Parent_func();
Now Child inherit from parent .If we make an instance of Child() constructor
var child1 = new Child();
So,
child1.__ proto __ === new Parent() 
child1.__ proto __ is now pointing to an object which happens to be an instance of Parent constructor.So now it will inherit all method and properties of Parent_func including it's prototype.
So 
child1.__ proto __.__ proto __ === Parent_func.prototype
console.log(child1) will result something like this !
Thus prototype chaining works in classical javascript
** _Now i will explain the image which op attached with the question:**
As we already know __ proto __ is used by instances to access the prototype of it's constructor :
enter image description here
1. First we created a constructor function Foo(){}
2. constructor function Foo has a prototype property which points to it's prototype which is Foo.prototype( see image).
3. Constructor functions are function which is instance of [[Function]] object.So we can say function Foo is constructed by [[Function]] object.So, __ proto __ of Foo indicates to Function.prototype.
4. [[Function]] objects inherit from [[Object]].So __ proto __ of Function.prototype points to Object.prototype.
5. Object.prototype is last man standing in prototype chain.So it's __ proto __ points to null.
6. Now come to instances of Foo.When we create an instance using new Foo(), it creates an instance.Foo it the constructor of these instance.Here we created two instances (x and y). __ proto __ of x and y thus points to Foo.prototype.

ref:[http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript]

No comments:

Post a Comment