Prototypes & inheritance in JavaScript
Tags: javascript, webdev
Published: 2021-01-25 18:25:59

# Intro

Have you ever wondered how inheritance works in a language like Javascript? This language is not in the first ones that come to your mind first when talking about OOP paradigms. Although inheritance literally works in JavaScript, and in the following sections we will discuss it in details.

### **Prototype**, the stalker

If you are not a real newbie to JavaScript, then maybe the words _prototype_ and property not sounds strange. Almost all objects in JavaScript have a prototype object. Although `Object.prototype` is one of that rare objects that does not have a _prototype_ object. When you create a simple 

` let a = 'bcd'; ` code, the 

`Object.getPrototypeOf(a); // String.prototype` 

will return you some interesting stuff. Your variable has been wrapped around with an object, here for example with the _String_. That is the reason why you can use that huge amount of different methods on your variables.

If you create a simple `let q = {};` then you do not have a _prototype_ property at all, sou can not query with the `q.prototype` way. But do not afraid, it is the normal behavior. We will discuss how to inspect the _prototype_ in the following sections.


**One important note: almost all object have a _prototype_ but do not have a property called _prototype_. Although inheritance in JavaScript works even this way.**

### Prototype chain

Accessing properties of object are just like bubbles underwater. It always goes up and up until reaches its goal. 

For example, take that you want to query the _myProperty_ property on an _myObject_ object. If that _own_ property does not exist on that object, the _prototype_ object of _myObject_ is looked up. If the property exists there (on that object), then that is returned. If not, then another level is looked again, until _myProperty_ is found or the _prototype_ property turns out to be null. In this case _undefined_ is returned. As this little description summarized it, the _prototype_ attributes create a chain, called **prototype chain.** 

#### Example

{% jsitor 0faO6nB1O %}

As you can see here, first we created our base object. Then two descendants are made in a chain-like way. If you query a property it bubbles up in the prototype chain, just like the _chair_ property does. If one is not exists, then _undefined_ returned. As you can see, you can overwrite properties, and that will not affect the prototype chain's properties, so setting properties not bubbles up, only getting. 

This is a key feature, because it allows us to create and overwrite inherited properties selectively.

### Exceptions

There is one exception that breaks the basic way of creating property of an object. If the inherited property you wish to overwrite (just like color in the previous example) is an accessor property with a setter method. Then that method will be invoked on your object and **again, leaves the prototype chain unmodified**.

{% jsitor Yn5GI-gfF?js %}


### Query the _prototype_

The simplest [built in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) function to check for the prototype is the 

`Object.getPrototypeOf()` 

method.

This is how it works.

```
Object.getPrototypeOf([]);  // Array.prototype
Object.getPrototypeOf('');  // String.prototype
```

Another useful method is the `isPrototypeOf` method. [Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf).

It returns a boolean value for you as the name suggests.

```
let a = {z: 1};
let b = Object.create(a);
a.isPrototypeOf(b);  // return true
```

### Set the _prototype_

It is important to note, that every prototype is set when creating a new object with any of the available syntaxes and totally unrecommended to change the prototype of an object.
Although it can be carried out in the following way.

```
let a = [1, 2];
Object.setPrototypeOf(a, String.prototype);
a.join(); // Throws a TypeError, join not defined
```

That why it is not a recommendation to set prototype manually.

#### Footnote \_\_proto\_\_

[\_\_proto\_\_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) is an early browser exposed implementation of the prototype attribute. Because a huge amount of code still depends on it, it is mandated for that reason, but **deprecated** since a long time. You should really avoid this. 



_I hope you enjoyed my article, leave your comments below!
The next post will be about Classes & Prototypes._


Resources:
David Flanagan: JavaScript, The Definitive Guide