Consider below code :
let Letter= function() {}
let a= new Letter();
let b= new Letter();
let z= new Letter();
// output in console
a.__proto__ === Letter.prototype; // true
b.__proto__ === Letter.prototype; // true
z.__proto__ === Letter.prototype; // true
Letter.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Letter.prototype.__proto__ === Object.prototype; // true
We can depict the above code in the following figure :
Now let's explore [[Prototype]]
, __proto__
and prototype
in details :
[[Prototype]]
[[Prototype]]
is an internal hidden property of objects in JS and it is a reference to another object. Every object at the time of creation receives an object (or null) as [[Prototype]]
. When we reference a property on an object [[Get]]
operation is invoked like, myObject.a
. If the object itself has a property, a
on it then that property will be used.
let myObject = {
a: 2,
};
console.log(myObject.a); // 2
But if the object itself directly does not have the requested property then [[Get]]
operation will proceed to follow the [[Prototype]]
link of the object. This process will continue until either a matching property name is found or the [[Prototype]]
chain ends (at the built-in Object.prototype
). If no matching property is found then undefined
will be returned. Now Object.create(anyObject)
creates an object with the [[Prototype]]
linkage to the specified anyObject
.
let anotherObject = {
a: 2,
};
// create an object linked to anotherObject
let myObject = Object.create(anotherObject);
console.log(myObject.a); // 2
Both for..in
loop and in
operator use [[Prototype]]
chain lookup process. So if we use for..in
loop to iterate over the properties of an object then all the enumerable properties which can be reached via that object's [[Prototype]]
chain will also be enumerated along with the enumerable properties of the object itself. And when using in
operator to test for the existence of a property on an object then in
operator will check all the properties via [[Prototype]]
linkage of the object regardless of their enumerability.
// for..in loop uses [[Prototype]] chain lookup process
let anotherObject = {
a: 2,
};
let myObject = Object.create(anotherObject);
for (let k in myObject) {
console.log("found: " + k); // found: a
}
// in operator uses [[Prototype]] chain lookup process
console.log("a" in myObject); // true
__proto__
__proto__
is a property of objects in JS and it references the another object in the [[Prototype]]
chain. We know [[Prototype]]
is an internal hidden property of objects in JS and it references another object in the [[Prototype]]
chain. We can get or set the object referred by the internal [[Prototype]]
property in 2 ways
Object.getPrototypeOf(obj) / Object.setPrototypeOf(obj)
obj.__proto__
We can traverse the [[Prototype]]
chain using: .__proto__.__proto__. .
. Along with .constructor
, .toString()
, .isPrototypeOf()
. The dunder proto property (__proto__
) actually exists in the built-in Object.prototype
root object, but available on any particular object. __proto__
is actually a getter/setter. Implementation of __proto__
in Object.prototype
is as follows :
Object.defineProperty(Object.prototype, "__proto__", {
get: function () {
return Object.getPrototypeOf(this);
},
set: function (o) {
Object.setPrototypeOf(this, o);
return o;
},
});
To retrieve the value of obj.__proto__
is like calling, obj.__proto__()
which actually returns the calling of the getter fn, Object.getPrototypeOf(obj)
which exists on Object.prototype
object. Although __proto__
is a settable property but we should not change [[Prototype]]
of an already existing object because of performance issues.
Using new
operator if we create objects from a function then internal hidden [[Prototype]]
property of those newly created objects will point to the object referenced by the prototype
property of the original function. Using __proto__
property we can access the other object referenced by internal hidden [[Prototype]]
property of the object. But __proto__
is not the same as [[Prototype]]
rather a getter/setter for it.
prototype
prototype
is a property of functions in JS and it refers to an object having constructor property which stores all the properties (and methods) of the function object.
let foo = function () {};
console.log(foo.prototype);
// returns {constructor: f} object which now contains all the
// default properties
foo.id = "Walter White";
foo.job = "teacher";
console.log(foo.prototype);
// returns {constructor: f} object which now contains all the
// default properties and 2 more properties that we added to
// the fn object
/*
{constructor: f}
constructor: f()
id: "Walter White"
job: "teacher"
arguments: null
caller: null
length: 0
name: "foo"
prototype: {constructor: f}
__proto__: f()
[[FunctionLocation]]: VM789:1
[[Scopes]]: Scopes[2]
__proto__: Object
*/
But normal objects in JS does not have prototype
property. We know Object.prototype
is the root object of all the objects in JS. So clearly Object
is a function i.e. typeof Object === "function"
. That means we also can create an object from the Object
function like, let myObj= new Object()
. Similarly Array
, Function
are also functions so we can use Array.prototype
, Function.prototype
to store all the generic properties of arrays and functions. It means we can say JS is built on functions.
{}.prototype; // SyntaxError: Unexpected token '.'
(function(){}).prototype; // {constructor: f}
Also using new
operator if we create objects from a function then internal hidden [[Prototype]]
property of those newly created objects will point to the object referenced by the prototype
property of the original function. In the below code, we have created an object, obj
from a fn, Letter
and added 2 properties one to the fn object and another to the prototype object of the fn. Now if we try to access both of the properties on the newly created object, obj
then we only will be able to access the property added to the prototype object of the function. This is because the prototype object of the function is now on the [[Prototype]]
chain of the newly created object, obj
.
let Letter = function () {};
let obj = new Letter();
Letter.from = "Albuquerque";
Letter.prototype.to = "New Hampshire";
console.log(obj.from); // undefined
console.log(obj.to); // New Hampshire
__proto__
differ fromconstructor.prototype
?