Javascript prototypal model and inheritance

Senath Sadeesha Weerasinghe
4 min readMar 10, 2021

What is a prototype ?

Javascript also has a object oriented nature , specially concepts like inheritance are approached by Javacript . Prototype and prototypical inheritance carries out the inheritance concept in javascript. Protottype also could be shown as a mechanism which passes or inherits features from one object to another. This blog article would discuss the prototypical inheritance and chaining in a broad manner.

Why we should learn prototype ?

Many say protypes and it’s model is old fashioned and already deprecated,specially after the introduction of ECMAscript clear OO concepts like classes were introduced which keeps away the so called old fashioned prototypes. However the thing which we should keep in mind is that concepts like classes are just wrappers or outer coverings of inner core protoypical models. Understanding of prototypes and prototypical chaining helps us to undertand the loosely coupled object oriented nature of javascript.

Still there are programmer who prefer these protypical concepts over ECMAscript ,therefore it is important to have solid understanding about prototypical modules as a javascript developer.

Why Javascript is a Prototypical language?

This scripting language has the prototype concept to embed the inhertance concept. Specially objects have a typical or template known as prototype to pass there features ,properties and methods among other objects. An objects prototype object could also have a another prototype object ,and that object could hava another. This concept is known as prototypical inheritance.

Prototype Objects and inheritance

function Cricketer(firstname, secondname, age, strikeRate,bestScore)
{
this.name = { firstname: firstname, secondname: secondname
}
this.age = age, this.strikeRate = strikeRate, this.bestScore = bestScore}
let kusal = new Cricketer('Kusal', 'Mendis', 24, 131.43, 196)

Here if kusal. Is entered in your javacript console , it would display properties of kusal and some inbuilt methods.

kusal.

Prototype object is some sort of a container which stores ,all the methods which should be inherited.

Here he constructor of cricketer could be seen with other properties. toString, valueOf methods also are displayed.

Person1.valueof() is typed in the console and

Here the browser works as follows

Person1 -> constructor -> prototype of person1 -> person1’s prototypes prototype object

· This concept is prototypical chaining and inheritance , the javascript browser searches for the valueof() method in the constructor of person1 object.

· Then checks the prototype of person1

· Finally checks the prototype of protoype object of person1 object.

Can we modify prototypes ?

Yes, we can add our custom properties to the constructor’s prototype , here all the inherited objects has opportunity to use these properties according to the concept of inheritence.

Cricketer.prototype.bat = function(){Console.log(‘Play Forward defence’);
}

Here we can add methods to the constructors , as the above code snippet. Keep in mind that any Crcicket object could use these inherited methods. kusal.bat();

Here we could also add properties to the prototype object,

Person.prototype.NoOfcenturies = 12

Are all the inbuilt methods are inherited ?

This is a common question which arises among beginners, because when we type person1. in our console though some properties have got inherited from Object class it doesn’t cover all which is displayed by Object.

Here we should keep in mind that only the methods which are defined in the protoype object of the object class are inherited and involving in chaining, but methods defined in Object. are limited only for the Object itself.

Object.is(), Object.keys() these are some method which are not inherited, but defined only in object constructor.

Is __.proto__ and prototype is different ?

It’s very important to undertand that __proto__ and the genral prototype property of the constructor are different.

Here Cricketer.prototype refers to the constructor function, which is the blue print for all the instances , but kusal.__proto__ (object.__proto)refers to the particular objects prototype.

.__proto__ is a keyword which is being deprecated currently, instead we also could use Object.getPrototype(obj) .

Refer to the following code

let Angelo = new Cricketer()Object.getprototype(kusal) === Cricketer.prototype

This gives the output as true, because Angelo object would copy or takes the constructor’s prototype object.

Does Object.create() has an impact on prototype ?

let kusal = Object.create( Angelo)

Here .create() , creates a object of type angelo and assigns it to kusal object.

kusal.__proto__ this will return the same prototype of Angelo object.

In this article we have discussed the basic concepts of prototypal Model and inheritance .

--

--