JavaScript Prototypes & Inheritance
What is a Prototype in JavaScript?
In JavaScript, every object has a hidden property called [[Prototype]] (accessible via __proto__), which points to another object. This forms a prototype chain.
Think of it as a blueprint or fallback for properties/methods not found on the object itself.
Prototype Chain
const person = {
greet: function () {
console.log("Hello!");
}
};
const student = Object.create(person);
student.name = "John";
student.greet(); // Output: Hello!
Here, student doesn't have greet, but it inherits from person via the prototype chain.
Constructor Functions and Prototypes
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(`${this.name} makes a noise.`);
};
const dog = new Animal("Dog");
dog.speak(); // Output: Dog makes a noise.
- speak is not directly on dog, but on Animal.prototype.
Prototypal Inheritance
You can set one constructor to inherit from another:
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(`${this.name} makes a noise.`);
};
function Dog(name, breed) {
Animal.call(this, name); // Inherit properties
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // Inherit methods
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function () {
console.log(`${this.name} barks!`);
};
const dog = new Dog("Rex", "Labrador");
dog.speak(); // Rex makes a noise.
dog.bark(); // Rex barks!
ES6 Class Syntax (Simplified Inheritance)
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
bark() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Charlie");
dog.speak(); // Charlie makes a sound.
dog.bark(); // Charlie barks.
- extends handles the prototype linkage.
- super() calls the parent class constructor.
Visual Representation
Imagine this chain:
dog --> Dog.prototype --> Animal.prototype --> Object.prototype --> null
Every object inherits from Object.prototype by default unless manually changed.
Summary Table
Concept | Description |
---|---|
prototype | Property on functions for shared methods |
__proto__ | Internal reference to an object's prototype |
Inheritance | Child object inherits from parent via prototype |
Constructor | Function used to create instances |
class / extends | Modern syntax for creating and inheriting classes |