Question

6.

What are prototypes in JavaScript

Answer

In JavaScript, prototypes are a fundamental and powerful feature that underpins the language's object-oriented programming paradigm. A prototype is essentially an object from which other objects inherit properties and methods. Understanding prototypes is crucial for grasping how inheritance works in JavaScript, as it relies on prototype chains to share functionalities between objects.

The Prototype Property

Every JavaScript function (which is also an object in JavaScript) has a prototype property, which is an object. When you create objects using a constructor function or class syntax (which is syntactic sugar over constructor functions), these objects inherit properties and methods from the constructor function's prototype object.

For example:

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // Output: Hello, my name is Alice

In this example, alice inherits the greet method from Person.prototype. This means that all instances of Person can use the greet method, but the method itself is stored in only one location in memory, which is efficient.

The [[Prototype]] Property

In addition to the prototype property that functions have, each JavaScript object has an internal and hidden property known as [[Prototype]] (often accessible via __proto__ in many JavaScript engines, though this is deprecated in favor of Object.getPrototypeOf()). This [[Prototype]] property is a reference to another object from which the current object inherits properties and methods.

When you try to access a property or method of an object, JavaScript first looks at the object's own properties. If it doesn't find it there, it follows the [[Prototype]] chain upwards and looks for the property in the object's prototype, then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain (the prototype of Object.prototype, which is null).

Prototype Chain

The prototype chain is the series of links between an object's prototype and its ancestors' prototypes. This chain allows for property and method inheritance in JavaScript. For example:

let animal = {
    eats: true,
    walk() {
        console.log("Animal walk");
    }
};

let rabbit = Object.create(animal);
rabbit.jump = function() {
    console.log("Rabbit jump");
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

Here, rabbit inherits from animal via its prototype chain. Even though rabbit doesn't have its own walk method or eats property, it can access those defined on animal because animal is in rabbit's prototype chain.

Key Points

  • The prototype property is used primarily for defining methods and properties that should be inherited by instances created from a constructor function.
  • The [[Prototype]] property (often accessed via Object.getPrototypeOf() or __proto__, though the latter is deprecated) is a reference to the object from which the current object inherits.
  • JavaScript uses the prototype chain to look up properties and methods: if an object doesn't have a property/method, JavaScript tries to find it on the object's prototype, then the prototype's prototype, and so on.

Support us ❤️

Buy Us A Coffee