Prototypal inheritance is one of the topics in programming every developer should know. This tutorial will help you learn what prototypal inheritance is, how it works and how to use it. You will learn about [[Prototype]], __proto__, how to change prototypes and much much more.

Creating, inheriting and re-usability

Knowing how to create objects is useful. It can help you do more things, often in better way. However, creating objects from scratch may not always be the best thing to do. The problem is that this practice can lead to repeated code. What you can do instead is create a base object.

This base object will contain universal properties and methods you may want in other objects. Later, let’s say you want to create an object that will use any of these properties or methods. You don’t have to write all those properties and methods from scratch. Instead, you can let that new object inherit from the base object.

When you do this, that new object will be able to use any property and method that exists in the base object. This is not everything you can do, yet. You can also add additional properties and methods only to that new object. After this, the base object will still be the same.

That new object, however, will not only be able to use anything from the base object. It will also be able to use anything new you’ve just added. This degree of re-usability can help you make your code much shorter, clearer and cleaner. This is how prototypal inheritance can help you.

The [[Prototype]] property

The fundamental part of prototypal inheritance is the [[Prototype]] property. This is a special hidden property that exists on every object in JavaScript. The value of this property is always either null or name of another object. When the value of [[Prototype]] is null it means that the object doesn’t inherit from any other object.

When the value is a name of another object it means that the object’s prototype references another object. Put simply, that object inherits from another object, whose name is specified in [[Prototype]]. When this happens, the inheriting object can use any property and method from the object it inherits from.

The [[Prototype]] property and prototypal inheritance

This is one of the things in JavaScript that can seem weird. Let’s say you want to access some property in an object. If that property exists JavaScript will return it. In case of a method, it will call that method. What if the property you want to access, or method you want to call, doesn’t exist on that object?

In that case, JavaScript will do something interesting. It will take a look at the value of [[Prototype]] property. If the value is not null, it will find the object this property refers to. When it finds it, it will take a look if that object contains the property you want to access, or method you want to call.

If the property exists, JavaScript will return its value. If the method exists, JavaScript will call it. This, in essence, is what prototypal inheritance is about. You can access “stuff” in one object even though you are working with a different object, if that different object inherits from the first object.

The proto, Object.setPrototypeOf() and Object.getPrototypeOf()

The [[Prototype]] property is hidden. However, there are ways that allow you to change its value. The one often used way to change prototype of an object is by using __proto__. One thing you should remember. The [[Prototype]] property and __proto__ are not the same thing.

The __proto__ is only a setter and getter for [[Prototype]] property. It allows you to work [[Prototype]] property. Another way to set [[Prototype]] is by using Object.setPrototypeOf() method. This is a more modern setter. More modern getter is Object.getPrototypeOf() method.

It is mostly due to overall support by browsers why __proto__ is more preferred than Object.setPrototypeOf()and Object.getPrototypeOf(). That said, using __proto__ is deprecated, and not recommended. What you should use instead is either Object.setPrototypeOf() or Object.getPrototypeOf().

#javascript #programming #javascript-development #web-development #development