JavaScript Prototypal Inheritance

In JavaScript, prototypal inheritance allows objects to inherit properties and methods from another object. This is one of JavaScript’s core features and is used to share behavior efficiently.

🔹 What is Prototype?

Every JavaScript object has an internal property called [[Prototype]], which points to another object (its prototype). If a property is not found in an object, JavaScript looks up the prototype chain until it finds the property or reaches null.

let person = {
    greet() {
        console.log("Hello!");
    }
};

let user = Object.create(person); // user inherits from person
user.name = "Alice";

console.log(user.name); // ✅ Output: Alice
user.greet(); // ✅ Output: Hello! (inherited from person)

✔ Object.create(person) creates a new object that inherits from person.

🔹 The `proto` Property

We can manually set or access an object’s prototype using __proto__.

let animal = { eats: true };
let rabbit = { jumps: true };

rabbit.__proto__ = animal; // Set rabbit's prototype to animal

console.log(rabbit.eats); // ✅ Output: true (inherited)
console.log(rabbit.jumps); // ✅ Output: true (own property)

✔ rabbit does not have eats, so JavaScript looks up the prototype (animal) to find it.

🔹 Prototype Chain Lookup

JavaScript continues searching up the prototype chain if a property/method isn’t found in an object.

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

let rabbit = {
    jumps: true,
    __proto__: animal
};

let whiteRabbit = {
    color: "white",
    __proto__: rabbit
};

console.log(whiteRabbit.eats); // ✅ Output: true (from animal)
console.log(whiteRabbit.jumps); // ✅ Output: true (from rabbit)
whiteRabbit.walk(); // ✅ Output: Animal walks (from animal)

✔ JavaScript follows the prototype chain until it finds the property/method or reaches null.

🔹 Using `Object.create()` for Inheritance

A cleaner way to create objects with a prototype is using Object.create().

let animal = { eats: true };
let rabbit = Object.create(animal); // rabbit inherits from animal
rabbit.jumps = true;

console.log(rabbit.eats); // ✅ Output: true
console.log(Object.getPrototypeOf(rabbit) === animal); // ✅ Output: true

✔ Object.create(prototypeObj) creates an object that inherits from prototypeObj.

🔹 Constructor Functions & Prototypes

A constructor function automatically sets the prototype of its instances.

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

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

let user = new Person("Alice");

user.sayHello(); // ✅ Output: Hello, my name is Alice
console.log(user.__proto__ === Person.prototype); // ✅ Output: true

✔ Methods added to Person.prototype are shared across all instances.

🔹 `class` Syntax and `extends`

The modern way to use inheritance in JavaScript is with ES6 classes.

class Animal {
    constructor(name) {
        this.name = name;
    }
    
    makeSound() {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof! Woof!");
    }
}

let myDog = new Dog("Buddy");
myDog.makeSound(); // ✅ Output: Buddy makes a sound
myDog.bark(); // ✅ Output: Woof! Woof!

✔ extends creates a prototype chain automatically.
✔ super allows calling methods from the parent class.

🎯 Summary

✔ Every object in JavaScript has a prototype.
✔ Properties/methods are inherited through the prototype chain.
✔ Use Object.create() for inheritance.
✔ Constructor functions inherit via Function.prototype.
✔ Modern JavaScript uses class and extends for inheritance.

🚀 Prototypal inheritance is a powerful concept in JavaScript! Let me know if you need more details. 😊

Souy Soeng

JavaScript Prototypal Inheritance