The Basics of JavaScript’s (Magical) Prototypal Inheritance

I was recently asked what makes JavaScript’s prototypal inheritance different than traditional class based inheritance. Having never explained it aloud before, I found myself unsure of exactly how to explain prototypal without dancing and arm waving. Let’s talk about it openly so I’m better prepared when asked the same question in the future.

Prototypal chain gang

First, we need to understand what is meant by prototypal inheritance. In JavaScript, everything is an object. Each object links privately to another object called its prototype. The chain goes all the way back until an object has a prototype of null. Since null has no prototype, it’s the final link in the prototype chain. You can think of it has everyone having a “phone a friend” until someone doesn’t.

Properly inheriting properties

Objects in JavaScript are known as “bags” of properties. These properties are referred to as own properties i.e. properties set and gotten from an instance of an object rather than the object’s prototype or another object in its prototype chain. Let’s look at a magical example:

Imagine you’re a wizard running a fruit shop. In the front of your shop, you’ve set out a bag containing the most popular fruits.

Since you’re a wizard, you’ve cast a spell on the bag that makes it easy for customers to get the fruit they want:

• When a customer reaches into the bag, they’ll get the fruit they’re looking for if it’s in the bag.
• If the fruit isn’t in the bag, their hand will magically reach into your stock room where you keep excess fruits.
• If the fruit isn’t in your stock room, their hand will reach all the way to your supplier’s stock room.
• If the fruit isn’t in your supplier’s stock room, their hand will reach into an empty bag (the null bag).

Figure 1, magical bags of fruit

Using figure 1 as an example, if a customer came in and asked for a mango, their hand would end up in the empty null bag. If a customer came in and asked for grapes, their hand would end up in the supplier bag.

Methodically inheriting methods

In JavaScript, any function can be added to an object as a property. The prototype chain still works here — if an object is missing a “method,” then the chain is traversed until it exists and is called, or an error is thrown. Whenever the inherited function is called, the value of this will refer to the inheriting object and not the prototype where the function is defined. Let’s go back to our wizardly fruit shop.

Imagine that you hire a young wizard to help close up whenever you’re in a rush to hit the quidditch pitch. Before leaving them alone, you write down each closing step as you go through it, for example, “#9. Clock out using my employee pin.” The young wizard, having inherited your list of directions, gets to #9. Now, it wouldn’t make much sense for them to clock out using your employee pin. So, the instructions are bound to the inheriting employee, and “my employee pin” refers to the pin of that employee.

Figure 2, magical methods

Alright, that about covers the basics. Like most concepts in most programming languages, there’s more depth to prototypal inheritance in JavaScript. Here are a few bonus points:

• Iterating over an object’s properties will iterate over every enumerable property in the prototype chain. Use hasOwnProperty to check whether an object’s property has been defined on itself.
• Trying to access non-existent properties will traverse the entire prototype chain.
• The class keyword introduced in ECMAScript2015 is syntactic sugar and still very much adheres to the prototype chain.

You can find more details over at my favorite resource, the MDN web docs, or with a quick Google search.

Happy coding!