JavaScript Essentials - Prototypes

Introduction to prototypes and inheritance

Prototypes are a fundamental concept in JavaScript that allow objects to inherit properties and methods from other objects. This tutorial covers the basics of prototypes, prototype chains, and inheritance in JavaScript.

What is a Prototype?

In JavaScript, every object has a prototype. A prototype is also an object, and it can have its own prototype, forming a chain known as the prototype chain. Here is an example:

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

Person.prototype.greet = function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};

const alice = new Person('Alice', 30);
console.log(alice.greet()); // Output: Hello, my name is Alice and I am 30 years old.
                

Prototype Chain

The prototype chain is a series of linked objects where each object inherits properties and methods from its prototype. If a property or method is not found on the object itself, JavaScript looks for it in the prototype chain. Here is an example:

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

Animal.prototype.speak = function() {
    return `${this.name} makes a sound.`;
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    return `${this.name} barks.`;
};

const charlie = new Dog('Charlie', 'Labrador');
console.log(charlie.speak()); // Output: Charlie barks.
                

Inheritance in JavaScript

Inheritance allows one object to inherit the properties and methods of another object. In JavaScript, this is achieved using prototypes. Here is an example of inheritance using prototypes:

function Vehicle(make, model) {
    this.make = make;
    this.model = model;
}

Vehicle.prototype.getDetails = function() {
    return `${this.make} ${this.model}`;
};

function Car(make, model, year) {
    Vehicle.call(this, make, model);
    this.year = year;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.getDetails = function() {
    return `${this.year} ${this.make} ${this.model}`;
};

const myCar = new Car('Toyota', 'Corolla', 2021);
console.log(myCar.getDetails()); // Output: 2021 Toyota Corolla
                

Object.prototype

All JavaScript objects inherit properties and methods from Object.prototype, which is the top of the prototype chain. Here is an example:

const obj = {};
console.log(obj.toString()); // Output: [object Object]
console.log(obj.hasOwnProperty('toString')); // Output: false
console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); // Output: true
                

Prototypal Inheritance vs. Classical Inheritance

Prototypal inheritance in JavaScript is different from classical inheritance found in other languages like Java and C++. In JavaScript, objects inherit directly from other objects. Here is a comparison:

• Prototypal Inheritance: Objects inherit directly from other objects.
• Classical Inheritance: Classes define objects and inheritance is from classes.

Summary

In this tutorial, you learned about prototypes and inheritance in JavaScript. You explored the concept of prototypes, prototype chains, and how inheritance is achieved using prototypes. Understanding prototypes is essential for writing efficient and maintainable JavaScript code.