A Breakdown of Prototype Chaining
To understand Object Oriented Programming in JavaScript, we first have to understand that JavaScript is not a class-based language. This can be a little confusing since class is a keyword used for syntax. In other languages, like ruby, we define classes that act as “blueprints” for objects. They serve as templates while objects are instances of those classes. Inheritance of attributes and methods occur through classes.
In JavaScript, however, we solely use objects for inheritance. Classes were introduced in ECMAScript 2015. It does not support class based object oriented programming. You can think of classes as functions which are also objects! JavaScript is actually a prototype-based language, in which JavaScripts objects hold references or links to other objects.
Here is an example.
In this example we have declared a Pet object with a constructor method. The constructor method creates object instances with the following attributes: name, species, and breed. We then create three objects, or three different pets, by calling the constructor method with new . To exactly what the first object looks like, we use console.log(). We then see the following in the browser’s console:
As expected we get back our object that has the appropriate attributes as properties. But at the bottom, we see this __proto__ property appear. This is the key to solving how inheritance works in JavaScript!
The __proto__ property is a private property that holds a link to another object. That object is referred to as its prototype.Let’s get back to the example and let us expand that property!
__proto__ propertyWhen we expand the drop down list, we first see the constructor method that we defined in our Pet object. This means that this object’s __proto__ property is linked to the Pet’s prototype. This is why the object is able to access that constructor method. The Pet prototype object acts a template and allows the selene object to inherit the constructor method. But what about the second __proto__ property? Well, let’s expand it!
This time we are given a bigger list! Its seems like the Pet's __proto__ property is pointing to another prototype object! But what could it be? Well it is important to remember that all objects in JavaScript are actually instances of Object , the class that represents JavaScript’s object data type. The global Object class has its own predefined sets of methods and properties. These methods and properties are available to the Pet object. And since the selene object is linked to the Pet prototype object, selene may also access those properties as well. This chain of inheritance is called the prototype chain.
Here is a visual representation of what the chain looks like:
Let’s sum this up because it can be very confusing! Each JavaScript object has a prototype object. The __proto__ property links an object instance with its prototype object. This prototype object allows the inheritance of methods and properties. selene inherits methods and properties from the Pet prototype. The Pet prototype has its own prototype object, which is the global Object prototype. The Pet prototype inherits all methods and properties associated with the global Object prototype.
As you can see, our chain ends at the global Object prototype. This is because the global Object prototype has no prototype object of its own. This technique of prototype chaining will go on forever until an object has a null value for its prototype object. That will be considered the last chain. As mentioned before, all JavaScript objects are instances of Object. This means that the global class Object will be the final chain in this inheritance chain!
The Differences Between Class and Prototypal Inheritance
Class Inheritance:
- instances inherits from classes(“blueprints”)
- creates a subclass relationship
Prototypal Inheritance:
- instances inherit from other object instances
- allows for selective inheritance
If you are anything like me, you might be overwhelmed with this new information. Here are a list of amazing resources!
- Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance?
- MDN Inheritance and the Prototype Chain
- MDN Object Prototypes
- MDN Article on the
classkeyword - Common Misconceptions About Inheritance in JavaScript
- Object Oriented Programming in JavaScript — Explained with Examples
- JavaScript Object Prototypes
