JavaScript Prototypes & Inheritance

You are reading Part 23 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 4]

Introduction

JavaScript uses prototypal inheritance, meaning objects can inherit properties and methods from other objects. This is done through prototype chaining, which forms the basis of object-oriented programming (OOP) in JavaScript. In modern JavaScript (ES6+), classes provide a more intuitive syntax for implementing inheritance.

1. Understanding Prototypes

Every JavaScript object has an internal property called [[Prototype]], which points to another object known as its prototype. The prototype contains shared properties and methods that can be accessed by instances.

Example of Prototype Inheritance:

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

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

let alice = new Person("Alice", 25);
alice.greet(); // Output: Hello, my name is Alice.

• The method greet() is not defined directly on alice, but alice inherits it from Person.prototype.

• If JavaScript cannot find a property on alice, it looks up the prototype chain to Person.prototype.

2. Prototype Chaining

Prototype chaining allows objects to inherit properties and methods from other objects up the chain.

Example of Prototype Chain:

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

Animal.prototype.makeSound = function() {
    console.log("Some generic animal sound");
};

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

Dog.prototype = Object.create(Animal.prototype); // Establish prototype chain
Dog.prototype.constructor = Dog; // Reset constructor

Dog.prototype.bark = function() {
    console.log("Woof! Woof!");
};

let dog = new Dog("Buddy", "Golden Retriever");
dog.makeSound(); // Output: Some generic animal sound
dog.bark(); // Output: Woof! Woof!

• Dog inherits from Animal using Object.create(Animal.prototype).

• The bark() method is unique to Dog, but Dog can still use makeSound() from Animal.

3. Using Object.create() for Prototypal Inheritance

The Object.create() method creates a new object with a specified prototype.

Example:

let car = {
    drive() {
        console.log("Car is driving");
    }
};

let electricCar = Object.create(car);
electricCar.charge = function() {
    console.log("Charging the electric car");
};

electricCar.drive(); // Output: Car is driving
electricCar.charge(); // Output: Charging the electric car

4. ES6 Classes and Inheritance

ES6 introduced the class syntax, making inheritance more readable and structured.

Example Using ES6 Classes:

class Vehicle {
    constructor(type) {
        this.type = type;
    }
    drive() {
        console.log(`The ${this.type} is moving`);
    }
}

class Car extends Vehicle {
    constructor(type, brand) {
        super(type); // Calls parent constructor
        this.brand = brand;
    }
    honk() {
        console.log("Beep! Beep!");
    }
}

let myCar = new Car("car", "Tesla");
myCar.drive(); // Output: The car is moving
myCar.honk(); // Output: Beep! Beep!

• Car extends Vehicle, inheriting its properties and methods.

• super(type) calls the parent constructor, ensuring type is set correctly.

5. Differences Between Prototype-Based and Class-Based Inheritance

You are reading Part 23 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 4]