Javascript Prototype Basics

Prototypes are the mechanism by which JavaScript objects inherit features from one another. Methods & properties of prototype are inherited by object.

Lets create two classes mobile & samsung.samsung class is special case of mobile class.

//mobile class

let mobile = function(w,h,b)

{

this.width = w;

this.height = h;

this.breadth =b;

}

mobile.prototype.breadth = 50

mobile.prototype.printDimension = function()

{

console.log(`width:${this.width} ,height:${this.height},breadth:${this.breadth}`);

}

samsung class inheriting from mobile class

//samsung class

let samsung = function(w,h,b,s)

{

//calling constructor

mobile.call(this,w,h,b);

this.stylus = s;

this.printDimension = function()

{

console.log(`width:${this.width} ,height:${this.height},breadth:${this.breadth},stylus:${this.stylus}`);

}

}

//samsung inherits from mobile

samsung.prototype = Object.create(mobile.prototype);

Here mobile is base class of samsung class.

Lets create objects of both class

//create object of mobile

let m1 = new mobile(300,500,50);

//mobile object

console.log("m1 properties:");

console.log("width:" + m1.width)

console.log("height:" + m1.height)

console.log("breadth:" + m1.breadth)

console.log("stylus:" +m1.stylus)

m1.printDimension();

//create object of samsung

let s1 = new samsung(400,600,45,'stylus pen');

//samsung object

console.log("\n");

console.log("s1 properties:");

console.log("width:" +s1.width)

console.log("height:" +s1.height)

console.log("bredth;" + s1.breadth)

console.log("stylus:" + s1.stylus)

s1.printDimension();

Lets see output.

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/proto-type$ node index.js

m1 properties:

width:300

height:500

breadth:50

stylus:undefined

width:300 ,height:500,breadth:50

s1 properties:

width:400

height:600

bredth;45

stylus:stylus pen

width:400 ,height:600,breadth:45,stylus:stylus pen

Here stylus is property of child class that is why it is not available in m1 the mobile class object which is base class.

We defined breadth as

 

mobile.prototype.breadth = 50

meaning breath is member of prototype of mobile but

samsung.prototype = Object.create(mobile.prototype);

says samsung’s prototype is mobile’s prototype so breath is available in objects of both class.

PrintDimension method written in prototype so it is common between all objects of mobile which saves duplication.if it is instance method it will be member of each object instantiated from mobile class.

We have overriden this method in Child class.So when PrintDimension method is called on child class it has additional information of stylus.

 

Properties written directly in class are called instance property while written in prototype are called prototype properties.

   Class inheriting properties & method from prototype that in turn inherit from its prototype till last entity object,prototype of object is null.this is called prototype chaining.