Prototypes, inheritance and why people say that in javascript everything is an object.
Did you ever wonder how strings, arrays or objects “know” the methods each of them have? How does a string know it can .toUpperCase() or an array that it can .sort()? We never defined these methods manually, right?
The answer is that these methods come built-in within each type of data structure thanks to something called prototype inheritance.
In JavaScript, an object can inherit properties of another object. The object from where the properties are inherited is named prototype. Objects can inherit properties from other objects — the prototypes.
You’re probably wondering: why the need for inheritance in the first place? Inheritance solves the problem of data and logic duplication. By inheriting, objects can share properties and methods.
How to access prototype’s properties and methods
When we try to access a property of an object, the property is not only searched in the object itself but also in the prototype of the object, in the prototype of the prototype, and so on until a property is found that matches the name or the end of the prototype chain is reached. If the property or method isn’t found nowhere in the prototype chain, only then javascript will return undefined.
Every object in JavaScript has an internal property called [[Prototype]]. The double square brackets that enclose [[Prototype]] signify that it is an internal property, and cannot be accessed directly in code. To find the [[Prototype]] of an object, we will use the Object.getPrototypeOf() method.
The output will consist of several built-in properties and methods.
Output{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}
Another way to find the [[Prototype]] is through the __proto__ property. __proto__ is a property that exposes the internal [[Prototype]] of an object.
It is important to note that .__proto__ is a legacy feature and should not be used in production code, and it is not present in every modern browser. The output will be the same as if you had used getPrototypeOf().
Keep in mind that prototypes can also be changed and modified through different methods.
The prototype chain
At the end of the prototype chain is Object.prototype. All objects inherit the properties and methods of Object. Any attempt to search beyond the end of the chain results in null.
If you look for the prototype of the prototype of an array, a function or a string, you’ll see it’s an object. And that’s because in javascript all objects are descendants or instances of Object.prototype, which is an object that sets properties and methods to all other javascript’s data types.
Each type of prototype (for example array prototype) defines it’s own methods an properties, and in some cases override the Object.prototype methods an properties (that’s why arrays have methods that objects don’t). But under the hood and going up the ladder of the prototype chain, everything in javascript is built upon the Object.prototype.
A note on classes
JavaScript is a prototype-based language, meaning object properties and methods can be shared through generalized objects that have the ability to be cloned and extended. This is known as prototypical inheritance and differs from class inheritance. Among popular object-oriented programming languages, JavaScript is relatively unique, as other prominent languages such as PHP, Python, and Java are class-based languages, which instead define classes as blueprints for objects.
When it comes to inheritance, JavaScript has only one structure: objects. Each object has a private property (referred to as its [[Prototype]]) that maintains a link to another object called its prototype. That prototype object has its own prototype, and so on until an object whose prototype is null is reached. By definition, null has no prototype, and acts as the final link in this chain of prototypes. Almost all objects in JavaScript are instances of Object at the top of the prototype chain.
Even though this is often seen as one of JavaScript’s main weaknesses, the prototype inheritance model is in fact more powerful than the classic class based model, because given the fact that prototypes can be manually changed it’s quite simple to build a classic model from a prototype model.
