JavaScript — Prototype

Learn about .prototype, [[Prototype]] and __proto__ in javascript.

learn on the fly

What is Prototype

A Prototype is an object that exists as a property on every function in JavaScript.

Object does not have prototype property. It has __proto__ property.

In the below code snippet, we can see that bikeFunc() is having a prototype property inbuilt and similarly by default, object bike is having __proto__ property.

/* Code 1 */
var bikeFunc = function(){
}
console.log(bikeFunc.prototype);  //[object Object] { ... }
var bike = {name: 'ninja'}
console.log(bike.__proto__);     //[object Object] { ... }

• Every single object is built by a constructor function.
• When we call a function with new keyword it creates a brand new object.
• Each time a constructor is called, a new object is created be it calling directly or indirectly the constructor.
• A constructor makes an object linked to its own prototype.

Detail explanation of new and this keyword is present in my article All about this and new keyword in javascript.

Prototype chain (.prototype, [[Protoytype]], __proto__)

/* Code 2 */
function Car(name) {
  this.name = name;
}
Car.prototype.start = function() {
  return "engine of "+this.name + " starting...";
};
var c1 = new Car("Santa Fe");
var c2 = new Car("Fiesta");
c2.speak = function() {
  console.log("Hello, " + this.start());
};
c2.speak();  //"Hello, engine of Fiesta starting..."

Let’s try to understand the above code with diagrammatic presentation.

prototype chain

In the above diagram, the right side of dotted line happens by default. In javascript, there is a function called Object and every function is having prototype property. So, function named Object is also having prototype property and .toString() , .typeof() etc. are part of that prototype object.

In the above diagram, boxes are objects and circles are functions. Car is constructor function and as we know each function is having prototype property in javascript. start() is a function/method which is property of Car.prototype object.

In the above code snippet, Car() function is called with new keyword in front of it which constructs object c1 and c2. Both object is having name property and c2 is having an additional method speak() as well.

But the important thing happens during the code execution is c1 and c2 gets linked with Car.prototype with internal linkage called [[Prototype]]. And even before that Car.prototype gets linked to Object.prototype with similar internal linkage called [[Prototype]]. (refer above diagram to see the prototype links)

In the above code when c2.speak() gets executed, function speak() calls this.start() and here this is nothing but current execution context i.e.c2 but does object c2 having start() method, answer is no. So, it goes through [[Prototype]] chain and look for whether start() method is available as part of Car.prototype object, answer is yes. So it gets start() method which prints this.name i.e.name property of c2 (current execution context object). Finally c2.speak() prints “Hello, engine of Fiesta starting…” .

Understanding __proto__

/* Code 3 */
function Car(name) {
  this.name = name;
}
Car.prototype.start = function() {
  return "engine of "+this.name + " starting...";
};
var c1 = new Car("Santa Fe");
var c2 = new Car("Fiesta");
c2.speak = function() {
  console.log("Hello, " + this.start());
};
console.log(c1.__proto__ === Car.prototype);    // true
console.log(c1.__proto__ === c2.__proto__);     // true
console.log(c1.constructor === Car);            // true
console.log(c1.constructor === c2.constructor); // true
console.log(c1.__proto__ === Object.getPrototypeOf(c1)); //true
console.log(c2.__proto__ === c2.constructor.prototype);  //true

[[Prototype]] is an internal linkage, so to access this link we use __proto__ property. As per above prototype chain diagram, we can see object c1 does not have __proto__ property so it goes through [[Prototype]] chain to Car.prototype object but __proto__ property is not available there as well. So it again goes through [[Prototype]] chain to Object.prototype and __proto__ property is available as part of Object.prototype.

Incase of c1.__proto__, __proto__ acts as get method and returns the linkage between c1 and Car.prototype object. That’s the reason behind c1.__proto__ === Car.prototype returns true. Same way c1.__proto__ and c2.__proto__ returns the same object as both has been constructed from same function.

Javascript provides method getPrototypeOf() also to get the internal [[Prototype]] linkage. So in the above code snippet, Object.getPrototypeOf(c1) and c1.__proto__ returns the same object.

c1.constructor returns reference toCar function, .constructor property is not available on c1 object but it gets hold of it because of [[Prototype]] chain and .constructor is a property of Object.prototype.

Summary

• Function and Object linked with an arbitrary linkage called .prototype.
• [[Prototype]] is an internal linkage which get created after executing any function with “new” keyword.
• __proto__ is a public property of Object.prototype to access the [[Prototype]] linkage.
• Object.getPrototypeOf() is a method to access the [[Prototype]] linkage.
• Constructor is a function, called with new keyword in front of it but .constructor is a property.
• __proto__ can be pronounced as dunder proto.

If you like this post and it was helpful, please click the clap 👏 button below multiple times to show support, thank you.