Prototypes

In Javascript prototype is a mechanism that allows objects to inherit properties and methods from other objects.

In this article we will learn this foundamental concept, which is crucial to understand Javascript on a deep level.

Prototype Inheritance

Objects can have a prototype object, which acts as a template object that it inherits methods and properties from. An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on.

This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.

[[Prototype]] Property

Every object in JavaScript has a hidden [[Prototype]] property that links to another object (its prototype).

When you try to access a property on an object, JavaScript first looks for the property on the object itself. If it doesn't find it, it looks up the prototype chain.

function Person(name) {
    this.name = name; // Instance property
}

// Adding a method to the Person prototype
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

// Creating instances of Person
const person1 = new Person('Alice');
const person2 = new Person('Bob');

// Both instances can call the sayHello method
person1.sayHello(); // Output: Hello, my name is Alice
person2.sayHello(); // Output: Hello, my name is Bob

__proto__ keyword

The __proto__ keyword is a non-standard way to access the [[Prototype]] property of an object. It is not part of the ECMAScript standard, but most modern browsers support it.

const obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

const arr = [];
console.log(arr.__proto__ === Array.prototype); // Output: true

const func = function() {};
console.log(func.__proto__ === Function.prototype); // Output: true

It is recommended to use the Object.getPrototypeOf() method to access the prototype of an object, as it is part of the ECMAScript standard.

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // Output: true

Prototype Chain

JavaScript uses a mechanism known as the prototype chain. When accessing a property or method, if it is not found in the object itself, JavaScript will look up the prototype chain until it reaches Object.prototype, which is at the top of the hierarchy. If the property or method is still not found, it returns undefined

const obj1 = { a: 1 };
const obj2 = Object.create(obj1); // obj2's prototype is obj1

obj2.b = 2;

console.log(obj2.a); // Output: 1 (inherited from obj1)
console.log(obj2.b); // Output: 2 (own property)
console.log(obj2.c); // Output: undefined (not found in obj2 or obj1)

In this scenario, obj2 inherits from obj1, allowing it to access properties defined on obj1 through the prototype chain

ES6 and modern way of inheritance

Older versions of JavaScript doesn't have a traditional class-based inheritance model like many other languages. Instead, it relies on a more flexible and dynamic approach called prototypal inheritance.