However, JavaScript is not a class-based language. While there is a class keyword in JavaScript since 2015, it’s only syntactic sugar. Under the hood, JavaScript has its own mechanism for defining and resolving inheritance relationships.

This mechanism is known as the prototype chain. There are two key things to know about the JavaScript prototype chain and how it differs from class-based languages. If you take nothing else from this article, these two points will get you pretty far in understanding JavaScript inheritance.

1. Prototypes are objects themselves

In class-based languages, the classes act as blueprints. No object of that class actually exists until you instantiate it in your program. So, you define the class, then you create an instance of that class.

In JavaScript, prototypes are objects themselves. In fact, every function in JavaScript has a __proto__ attribute and a special property called `prototype` that allows you to access the __proto__ attributes.

If you open your console in your browser (ctrl+shift+I in Chrome & Firefox), you can see this for yourself.

Let’s create a new function that does absolutely nothing. Just leave it empty:

Then, let’s check out the default prototype property that JavaScript created for us:

We can add data and methods to our doSomething prototype by setting them using .prototype:

Then, if we look at the results of console.log( doSomething.prototype ); again we can see that new value:

2. JavaScript prototypal inheritance relationships are created/resolved on-the-fly at the time of interpretation

JavaScript is designed to run inside browsers, so it isn’t compiled and it needs to be simple to interpret and resolve at runtime.

The prototype chain keeps things simple by making everything a first-class object. Instead of class blueprints that can inherit once they’re instantiated as real objects, JavaScript just chains objects together to form inheritance relationships.

That might be a confusing sentence to read, and sometimes JavaScript’s chaining rules are confusing, so let’s look at an example:

If we look at fido’s prototype inheritance chain we can see these relationships:

fido.__proto__

• Animal {bark: ƒ, constructor: ƒ}
  • bark: ƒ () <– Dog’s bark method
  • constructor: ƒ (name, breed) <– Dog’s arguments for setting breed attribute
    • arguments: null
    • caller: null
    • length: 2
    • name: “Dog”
    • prototype: Animal {bark: ƒ, constructor: ƒ}
    • __proto__: ƒ ()
    • [[Scopes]]: Scopes[2]
  • __proto__:
    • eat: ƒ () <– Animal’s eat method
    • constructor: ƒ (name) <– Animal argument for setting name attribute
    • __proto__: Object

When JavaScript finds that fido itself doesn’t have an eat method, it checks fido’s parent, Dog.prototype, methods. When Dog.prototype also doesn’t have an eat method, it checks Dog’s parent, Animal.prototype, where it finds the eat method.

When you use the class keyword, what’s really happening is what we see above. However, the class keyword makes it much easier to write. Now you can say: