What this is about?

A brief introduction on

• Ambiguous nature of the term prototype
• What prototype means in Javascript
• How it is being used in our daily code

What this is not about?

• Different ways of Inheritence in Javascript
• How Object oriented programming is done in Javascript

Javascript and it's love for ambiguity

Functions ambiguous, Object ambiguous, Classes ambiguous, and the saga continues . . .
and what does this leaves us with?

Ambiguous nature of term prototype 😓

The term prototype has been used to serve two meanings 😪

• [[Prototype]]
• .prototype

[[Prototype]]

• For every object which is being created, Javascript internally creates a property named [[Prototype]], and links an object to it.

• The [[Prototype]] object is linked to the newly created object to implement inheritance.

• The property can also be null.

• It is this property which serves as the actual prototype for any object.

• In ES2015, we can access the property by __proto__/ Object.getPrototypeOf(obj).

• The value of the [[Prototype]] is different for unique type of object in JS.

.prototype

• This is an internal property which, is only created for new function declarations, and not for the built-in functions

• It's purpose is to serve as a [[Prototype]] for a different object, or for objects created using new operator on the function declared.

• These .prototype object have a constructor property, which initially points back to the declared function.

• All functions in JS, will have their own .prototype property, whose value may differ with the type of function.

• Since, they are object, they will have their own [[Prototype]] property.

• The [[Prototype]] property of an .prototype object can point to different object or it can also be null.

Examples of [[Prototype]]

Since, every object in Javascript will have a [[Prototype]], this means, whatever data we go on to declare will have a [[Prototype]] object of their own.

Recall : The value of the [[Prototype]] is different for unique type of object in JS.

var a = 2;
console.log(a.__proto__);        // Number {}

var b = 'foo';    
console.log(b.__proto__);        // String {}

var obj = {
    'foo':'bar'
};
console.log(obj.__proto__);      // Object {}

var arr = [];
console.log(arr.__proto__);      // []

var bool = true;
console.log(bool.__proto__);     // Boolean {}

function Foo(){}
console.log(Foo.__proto__);      // function (){}

But  what are these [[Prototype]] pointing to?

Recall : The purpose of .prototype object, of every function, is to serve as a [[Prototype]] objfor a different object, or for object created using new operator on the function declared.

Examples of .prototype

Whenever a function is created in Javascript, Javascript will internally add a property named prototype to the function, and this is only added to function declarations.

console.log(Object.prototype);

console.log(Number.prototype);

console.log(Function.prototype);

console.log(Array.prototype);

function Foo(){}

console.log(Foo.prototype);

So, if we look at the diagram of how the linking has been done till now for the code, it will look like this.

var obj = { a : 1 };

function Foo(){}

The .prototype has one special property, the constructor property, which 'initially' points back to the function in which .prototype property is present.

Object.prototype.constructor will point back to the Object function, Foo.prototype.constructor will point back to the Foo function, and so on.

With the above change, the diagram changes a little.

Since the .prototype is an object the .prototype, will also have it's [[Prototype]], which may point to a different object.

console.log(Function.prototype.__proto__);

console.log(Foo.prototype.__proto__);    

console.log(Number.prototype.__proto__);

console.log(Array.prototype.__proto__);

console.log(String.prototype.__proto__);

console.log(Object.prototype.__proto__);

With the [[Prototype]] in picture for .prototype object, the diagram again undergoes through another modification.

This method of linking an object to the [[Prototype]] of another object, and then so on.. is referred to as Prototype chaining.

So if a new instance is created from 'Foo', what will be the [[Prototype]] of the new object?

var fooInstance = new Foo();

It will be "Foo.prototype", and if we, now look at the diagram.

How it is being used in our daily code.

• The data which we declare.
• Objects created using new on functions.
• Object.create to implement inheritance, and alter the [[Prototype]].

Object.create - accepts an object as first parameter, creates an empty object, links the [[Prototype]] of empty object to the object received.

function Foo() {}

Foo.prototype.myName = 'Anirudh';

function KidFoo(){}

KidFoo.prototype = Object.create(Foo.prototype);

var kidFooInst = new KidFoo();

console.log(kidFooInst.myName);        // 'Anirudh'

console.log(kidFooInst.contructor);    // Foo

[[Prototype]] are the foundation for inheritance in Javascript.