JS Prototypal Inheritance
In this page:
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
class Child extends Parent { }Basic Prototypal Inheritance
Prototypal inheritance lets one object reuse properties and methods from another object. Rather than copying method code onto every object, prototypal inheritance keeps one shared copy on the prototype and has each instance delegate lookups to it.
उदाहरण: Basic Prototypal Inheritance
// Declare the constant `animal`, set to `{ speak() { console.log("Some sound"); } }`
// Declare the constant `animal`, set to `{ speak() { console.log("Some sound"); } }`
const animal = { speak() { console.log("Some sound"); } };
// Declare the constant `dog`, set to `Object.create(animal)`
// Declare the constant `dog`, set to `Object.create(animal)`
const dog = Object.create(animal);
// Call `dog.speak()`
// Call `dog.speak()`
dog.speak();Adding Child Properties
The child object can have its own properties while still using inherited methods. This lets you extend shared behavior for one specific instance without affecting the prototype other objects still rely on.
उदाहरण: Adding Child Properties
// Declare the constant `animal`, set to `{ speak() { console.log("Some sound"); } }`
// Declare the constant `animal`, set to `{ speak() { console.log("Some sound"); } }`
const animal = { speak() { console.log("Some sound"); } };
// Declare the constant `dog`, set to `Object.create(animal)`
// Declare the constant `dog`, set to `Object.create(animal)`
const dog = Object.create(animal);
// Assign "Rex" to `dog.name`
// Assign "Rex" to `dog.name`
dog.name = "Rex";
// Print `dog.name` to the console
// Print `dog.name` to the console
console.log(dog.name);
// Call `dog.speak()`
// Call `dog.speak()`
dog.speak();Method Reuse
A shared method can work with different objects because this points to the object that calls the method.
Because the prototype method is defined once, updating it changes the behavior for every object that inherits from that prototype, which is efficient but also worth being careful with.
उदाहरण: Method Reuse
// Declare the constant `animal`; its value is built below
// Declare the constant `animal`; its value is built below
const animal = {
speak() { console.log(this.name + " makes a sound"); },
};
// Declare the constant `dog`, set to `Object.create(animal)`
// Declare the constant `dog`, set to `Object.create(animal)`
const dog = Object.create(animal);
// Assign "Rex" to `dog.name`
// Assign "Rex" to `dog.name`
dog.name = "Rex";
// Call `dog.speak()`
// Call `dog.speak()`
dog.speak();Changing the Prototype
You can create objects with a chosen prototype. Object.setPrototypeOf can also change a prototype, but it should be used carefully.
Object.create(proto) is the direct way to build this relationship explicitly, giving you full control over exactly which object becomes the new object's prototype.
उदाहरण: Changing the Prototype
// Declare the constant `proto`, set to `{ greet() { return "hi"; } }`
// Declare the constant `proto`, set to `{ greet() { return "hi"; } }`
const proto = { greet() { return "hi"; } };
// Declare the constant `obj`, set to `Object.create(proto)`
// Declare the constant `obj`, set to `Object.create(proto)`
const obj = Object.create(proto);
// Print `obj.greet()` to the console
// Print `obj.greet()` to the console
console.log(obj.greet());Practical Inheritance Example
Prototypal inheritance is useful when many objects need the same behavior without copying every method.
This pattern predates JavaScript classes (which are largely syntax sugar over it) and still underlies how class-based inheritance actually works under the hood.
उदाहरण: Practical Inheritance Example
const vehicle = { drive() { console.log("Driving"); } };
const car = Object.create(vehicle);
const truck = Object.create(vehicle);
car.drive();
truck.drive(); // both share vehicle's methodChapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: