← flaviocopes.com

JavaScript Prototypal Inheritance

Published Jul 24 2018

JavaScript is quite unique in the popular programming languages landscape because of its usage of prototypal inheritance.

While most object-oriented languages use a class-based inheritance model, JavaScript is based on the prototype inheritance model.

What does this mean?

Every single JavaScript object has a property, called prototype, which points to a different object.

This different object is the object prototype.

Our object uses that object prototype to inherit properties and methods.

Say you have an object created using the object literal syntax:

const car = {}

or one created with the new Object syntax:

const car = new Object()

in any case, the prototype of car is Object:

If you initialize an array, which is an object:

const list = []
const list = new Array()

the prototype is Array.

You can verify this by checking with the Object.getPrototypeOf() and the Object.prototype.isPrototypeOf() methods:

const car = {}
const list = []

Object.getPrototypeOf(car) === Object.prototype

Object.getPrototypeOf(list) === Array.prototype

All the properties and methods of the prototype are available to the object that has that prototype:

Object.prototype is the base prototype of all the objects:

Object.getPrototypeOf(Array.prototype) == Object.prototype

If you wonder what’s the prototype of the Object.prototype, there is no prototype: it’s null. It’s a special snowflake ❄️.

The above example you saw is an example of the prototype chain at work.

I can make an object that extends Array and any object I instantiate using it, will have Array and Object in its prototype chain and inherit properties and methods from all the ancestors.

In addition to using the new operator to create an object, or using the literals syntax for objects and arrays, you can instantiate an object using Object.create().

The first argument passed is the object used as prototype:

const car = Object.create({})
const list = Object.create(Array)

Pay attention because you can instantiate an array using

const list = Object.create(Array.prototype)

and in this case Array.isPrototypeOf(list) is false, while Array.prototype.isPrototypeOf(list) is true.

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

I also got a super cool course 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site

Interested in solopreneurship?