JavaScript __proto__ VS prototype

__proto__ is internal property of an object, pointing to its prototype, and being used in the lookup chain to resolve methods. Current standards provide an equivalent Object.getPrototypeOf(O) method, though de facto standard __proto__ is quicker.

prototype is a property of a Function object. It is the prototype of objects constructed by that function, and is used to build __proto__ when you create an object with new:

You can find instanceof relationships by comparing a function’s prototype to an object’s __proto__ chain, and you can break these relationships by changing prototype.

Here Point is a constructor function, it builds an object (data structure) procedurally. myPoint is an object constructed by Point() so Point.prototype gets saved to myPoint.__proto__ at that time.

Protoype property is created when a function is declared.

For instance:

Person.prototype property is created internally once you declare above function.
Many properties can be added to the Person.prototype which are shared by Person instances created using new Person().

It is worth noting that Person.prototype is an Object literal by default (it can be changed as required).

Every instance created using new Person() has a __proto__ property which points to the Person.prototype. This is the chain that is used to traverse to find a property of a particular object.

creates 2 instaces of Person, these 2 objects can call age property of Person.prototype as person1.age, person2.age.

In the above picture you can see that Foo is a Function Object and therefore it has a __proto__ link to the Function.prototype which inturn is an instance of Object and has a __proto__ link to Object.prototype. The proto link ends here with __proto__ in the Object.prototype pointing to null.

Any object can have access to all the properties in its protochain as linked by __proto__ , thus forming the basis for prototypal inheritence.

__proto__ is not a standard way of accessing the prototype chain, the standard but similar approach is to use Object.getPrototypeOf(obj).

Below code for instanceof operator gives a better understanding:

object instanceof Class operator returns true when an object is an instance of a Class, more specifically if Class.prototype is found in the proto chain of that object then the object is an instance of that Class.

The above method can be called as :,Class) which return true if object is instance of Class.

When creating a function, a property object called prototype is being created (this prototype object also points to, or has an internal-private link to, the native JavaScript Object). For example:

Now, if we’ll create a new object out of Foo using the new keyword, we basically creating (among other things) a new object that has an internal link to the function’s prototype Foo we discussed earlier:

The private linkage to that function’s object called [[Prototype]]. Many browsers are providing us with a public linkage instead that called __proto__!

To be more specific, __proto__ is actually a getter function that belong to the native JavaScript Object and returns the internal-private prototype linkage of whatever the this binding is (returns the [[Prototype]] of b):

It is worth noting that starting from ECMAScript5, we can use the getPrototypeOf method to get the internal private linkage:

NOTE: this answer doesn’t intend to cover the whole process of creating new objects or new constructors, but to help better understand what is __proto__, prototype and [[Prototype]] and how it works.

Resource: Stackoverflow

Leave a Reply

Your email address will not be published. Required fields are marked *