Chapter 26. Prototype In JavaScript

JavaScript is a prototype-based language, meaning that objects can inherit properties and methods from other objects. This is accomplished through the prototype mechanism. Understanding prototypes is crucial for mastering JavaScript, especially for effective inheritance and creating robust applications. In this blog, we will delve into the concept of prototypes, how they work, and practical examples.

What is a Prototype?

A prototype is an object from which other objects inherit properties and methods. Every JavaScript object has a prototype, and this prototype is also an object. When you try to access a property or method on an object, JavaScript first looks at the object itself. If it doesn’t find it, it looks at the object’s prototype, and then the prototype’s prototype, and so on. This chain is known as the prototype chain.

Creating Objects with Prototypes

Object Literals and Prototypes

When you create an object using an object literal, it automatically inherits from Object.prototype.

let person = {
    name: 'John Doe',
    age: 30,
    greet: function() {
        console.log('Hello, my name is ' + this.name);
    }
};

console.log(person.toString()); // Output: [object Object]

In this example, the person object inherits the toString method from Object.prototype.

Constructor Functions and Prototypes

Constructor functions allow you to define custom objects with shared properties and methods via the prototype.

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

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

let person1 = new Person('John Doe', 30);
let person2 = new Person('Jane Doe', 25);

person1.greet(); // Output: Hello, my name is John Doe
person2.greet(); // Output: Hello, my name is Jane Doe

In this example, Person.prototype.greet is a method shared by all instances of Person.

Prototypal Inheritance

Prototypal inheritance allows one object to inherit properties and methods from another object.

let animal = {
    speak: function() {
        console.log(this.name + ' makes a noise.');
    }
};

let dog = Object.create(animal);
dog.name = 'Rex';
dog.speak(); // Output: Rex makes a noise.

In this example, the dog object inherits the speak method from the animal object.

Prototype Chain

The prototype chain is a series of linked objects, where each object inherits from its prototype.

console.log(dog.__proto__ === animal); // true
console.log(animal.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

In this example, dog‘s prototype is animal, animal‘s prototype is Object.prototype, and Object.prototype has no prototype.

Modifying Prototypes

You can add properties and methods to an existing prototype, affecting all objects that inherit from it.

Person.prototype.sayGoodbye = function() {
    console.log(this.name + ' says goodbye.');
};

person1.sayGoodbye(); // Output: John Doe says goodbye.
person2.sayGoodbye(); // Output: Jane Doe says goodbye.

In this example, the sayGoodbye method is added to Person.prototype and becomes available to all instances of Person.

Checking Properties

You can check if a property exists directly on an object or on its prototype.

console.log(person1.hasOwnProperty('name')); // true
console.log(person1.hasOwnProperty('greet')); // false
console.log('greet' in person1); // true

In this example, hasOwnProperty checks if a property exists directly on the object, while the in operator checks the entire prototype chain.

Using ES6 Classes

ES6 introduced classes, providing a more familiar syntax for working with prototypes.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log('Hello, my name is ' + this.name);
    }

    sayGoodbye() {
        console.log(this.name + ' says goodbye.');
    }
}

let person1 = new Person('John Doe', 30);
person1.greet(); // Output: Hello, my name is John Doe
person1.sayGoodbye(); // Output: John Doe says goodbye.

In this example, the Person class uses the class syntax to define properties and methods, but it still relies on the prototype mechanism under the hood.

Prototypes are a fundamental aspect of JavaScript, enabling inheritance and the sharing of properties and methods across objects. By mastering prototypes, you can create more efficient and reusable code. Whether using object literals, constructor functions, or ES6 classes, understanding how prototypes work will enhance your JavaScript development skills and help you build more robust applications. Experiment with the examples provided and explore the power of prototypes in your projects.