Tutorial

The JavaScript Prototypal Inheritance Pattern

Published on February 1, 2019
Default avatar

By Vijay Prasanna

The JavaScript Prototypal Inheritance Pattern

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

JavaScript does not contain classes and but it’s an still strongly object oriented language. The object-to-object relation in JavaScript is implemented with the prototype and the resulting prototypal pattern is very unique to JavaScript.

Before the ES6 class syntax, the topic of inheritance has been mostly confusing for developers who came from other languages. This is because JS, in my humble opinion, is a truly object-driven language.

This makes it quite difficult to grasp the idea of inheritance in JavaScript objects, like: how do you create new objects with same properties without classes?. This article is an attempt to explain it and how this property applies to a specific object oriented pattern in JavaScript.

As we’ve previously seen, objects in JavaScript have the ability to inherit directly from other objects through a shared property called prototype and how the prototype is used for implementing inheritance in JavaScript objects.

Now, this inheritance is not the traditional inheritance that we’re used to in class-based languages but instead it’s something comparable to object delegation. Roughly meaning, if a particular property is not found in an object, then I’d check its prototype for the definition of the property in question.

Here is a quick snippet to show what I’m talking about:

let Alligator = function(color) {
  this.color = color;
}

Alligator.prototype.introduce = function() {
 console.log('I am ' + this.color);
}

let Croc = function(color) {
  Alligator.call(this, color);
}

Croc.prototype = Object.create(Alligator.prototype)

let alligatorObj = new Alligator('green');
let crocObj = new Croc('yellow');

alligatorObj.introduce(); // I am green
crocObj.introduce(); // I am yellow

So what happened above is this - the instance of croc has a copy of a prototype that links to the prototype of Croc which in turn links to the prototype of Alligator. The Alligator prototype is able to provide us with the definition for introduce().

This is what I mean by delegation, searching for the target behavior inside objects (i.e the prototype). Also, JavaScript prototypes can link to multiple prototypes, so in that way we can have multiple inheritance as well, but that’s often a bad idea in practice.

The snippet is an example of how object-to-object code looks like. It’s very primitive but facilitates direct transfer of properties and methods between objects. This is built into the design of JavaScript; the class syntactic sugar or the constructor are simply wrappers on top this to make it feel like classical OOP.

Most of the time, prototypal pattern is very simple and easy to implement. Why? Because of our classical understanding of objects and classes, we expect a constructor function to create an instance for us. In JavaScript any function can be a constructor, like this :

function Alligator(color) {
 This.color = color;
}

Let alligator = new Alligator('purple');

All we have to do is prefix the new keyword to the function invocation and we have an object. All that the new keyword does is that it invokes the Alligator() function as a constructor by binding this (which is the new context) to the function call. It feels like we are simply going out of our way to make classical object pattern work in JavaScript. Compared to this, the prototypal pattern feels intuitive. Note also that by convention functions that are meant to be used as a constructor for new objects should start with a capital letter, otherwise it could get quite confusing to know where the new keyword should be used.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Vijay Prasanna

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel