Prototype Inheritance in JavaScript
INHERITANCE
Inheritance refers to an object’s capability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through prototypes and this form of inheritance is often called prototypal inheritance.
In this article, we will be covering a detailed note on prototypal inheritance and implementing inheritance.
PROTOTYPE
Almost all objects in JavaScript have the prototype property. The prototype is a reference to another object and it is used whenever JS cannot find the property the user is looking for in the current object. In simple, whenever the user wants to call a property on an object and it does not exist, JavaScript will go to the prototype object and look for it there. If it finds it will use it, if not it will go to that object’s property and look there. This can bubble up all the way to Object.prototype before returning undefined. This is the principle of the prototype chain and the behaviour that sits behind JavaScript’s inheritance.
THE PROTOTYPE CHAIN
To understand object prototypes, we need to discuss object lookup behaviour. When we look for a property of an object, the JavaScript engine will first check the object itself for the existence of the property. If not found, it will go to the object’s prototype and check that object. If found, it will use that property.
If not found, it will go to the prototype’s prototype, and on and on until it finds an object with a __proto__ property equal to null. So if the user is going to attempt to lookup the property someProperty on obj object from above, the engine would first check the object itself.
If it wouldn’t find it and would then jump to its __proto__ object which is equal to Object.prototype. It wouldn’t find it there either and upon seeing that the next __proto__ is null, it would return undefined.
This is called the prototype chain. It is normally described as a chain going downwards, with null at the very top and the object which the user is using at the bottom.
While performing a lookup, the engine will pass through up the chain looking for the property and return the first one it finds, or undefined if it is not present in the prototype chain.
__proto__ === null
|
|
__proto__ === Object.prototype
|
|
{ object literal }
FUNCTION PROTOTYPES
Functions all have a prototype property distinct from their __proto__ property. It is an object. A function’s sprototype’s __proto__ property is equal to Object.prototype.
function fn() {}
console.log(fn.prototype.__proto__ === Object.prototype);
// -> true
EXECUTING INHERITANCE
The user can work with a function’s prototype property directly and safely. By placing methods and other properties on a function’s prototype, and can allow all objects created by that function to access those properties through inheritance.
function Fn() {}
Fn.prototype.print = function() {
console.log(“Calling Fn.prototype’s print method”);
};
var obj = new Fn();
obj.print(); // -> Calling Fn.prototype’s print method
This works in a different way because, each object created by calling new Fn() will have its own version of print placed directly on the object. There will be different functions in memory. The difficulty with this is performance and memory usage.
PERFORMANCE
There may be times the user might need thousands of new objects created from a constructor function. Using this second way of attaching print, we now have thousands of copies of print, each one attached to one of the objects.
Using the prototype chain, no matter how many objects the user creates out of a Fn, the user will have one print sitting on Fn.prototype.
Big programs, however, often have tens of methods that objects need. If an object needs access to 20 methods and we create 100,000 objects, the JavaScript engine has created 2,000,000 new functions. If this needs to happen multiple times, this will cause visible speed and memory issues.
Using console.time and console.timeEnd, the user can directly show the difference in how long it takes.
THE VERDICT
Prototypes are more of a delegation tool and they do not really behave like classes. Now with the latest approach the user can create normal class hierarchies and use understandable syntax for them, but be cautious of possible problems that may occur. This syntax is only a beautiful facade for what’s going on inside.