Inheritance and the prototype chain

krishcdbry
4 min readJul 29, 2019

A most controversial feature of Javascript is the way that does the inheritance. Which is very different than other modern programming languages which use class for inheritance whereas Javascript inheritance works with the prototype.

* Javascript > Prototype-based Inheritance

Class first formulated in 1967 in a language called Simula. Whereas the prototypal model first heard in SmallTalk around the 1980s. But we can simulate the classical language in a prototypal language such as Javascript, You cannot do the reverse way. Java is not powerful enough because we cannot write the Javascript style in Java (It is not good enough) but we can do vice versa.

PROTOTYPE

Working with prototypes.

1. Make an object that you like
2. Create new instances that inherit from that object.
3. Customize the new object. (Taxonomy and classification are not necessary).

This model of programming is sometimes called Delegation (Differential Inheritance)
Simple terms: You make an object and inherits only to make the new object different from the old object which explains the term differential inheritance. (It only contains the differences)

So every object in Javascript internally refers to another object called its prototype. The prototype object itself referenced to another object which is its prototype and it continues until reaches to NULL. If you observe this is a chain of objects linking one to another and the tip of this chain is null. This chain is called prototype chain and the whole process named as prototypal inheritance

Objects have a prototype attribute

1. Prototype: Object or null
2. Object.create(object, properties…) — Which allows us to make a new object which inherits from an existing object or also we can copy the material from existing object to new object. Object copying can be done
3. Object.getPrototypeOf(object) — Getting the prototype.
Originally it didn’t have Object.create instead it has New operator, Which modifies the way how invocation works.

It was trying to look classical but it is not at all. (Don’t use new anymore)
Some issues

The for in problem- Functions inherited from a prototype is included in for in enumeration.

Some cases we need to be careful. But this is solved in ES5 after introducing Object.keys(object) — Which returns the keys of that particular object.

INHERITANCE

We can create a constructor which are obviously an object. Every empty function is called a constructor.

We have here the outerMethod which is attached to the prototype of the function. So if we print the function we will see this

See the function has prototype and it is showing the outerMethod. Now if we create an object from this constructor function using the new keyword

From the above code if we observe the Jaguar is inherited from Car Object which has the only innerMethod but if we try to access the outerMethod also it returned the output correctly without any reference error because it is due to prototype chain.

when we are trying to access (refer) a property that an object does not of contain itself , the prototype chain is traversed until the accessed property is found or until the end of prototype chain is reached (i.e NULL). If found it returns the property if not it returns undefined.
GET is DEEPER and SET is SHALLOW

PARENT OBJECT (MASTER)

Everything is javascript is an object and basically comes from the parent object (Prototypal inheritance) And every child can access any method/property of any parent in the entire prototype chain.

That’s all flocks!

--

--

krishcdbry

Director Of Engineering @ Bharatpe. Geeky Ninja — Breathing Code, Dreaming Optimisation, Building Crazy Stuff & always up for new Challenges.