Prototypes & Prototype Chain
Every JavaScript object has a hidden link to another object called its prototype. When you access a property that doesn't exist on an object, JavaScript looks up the prototype chain. This is how inheritance works in JS.
Prototypes Explained
- Prototype - Every object has a __proto__ (prototype) linking to another object
- Prototype chain - Object → its prototype → its prototype's prototype → ... → null
- Property lookup - JS first checks the object, then its prototype, then the chain, until null
- Constructor.prototype - Shared methods for all instances: User.prototype.greet = function() { }
- Why prototypes? - Memory efficiency: methods defined once on prototype, shared by all instances
- Object.create() - Create object with specific prototype: Object.create(protoObject)
Prototypes Code
// Constructor with prototype methods
function Animal(name, sound) {
this.name = name;
this.sound = sound;
}
// Method on prototype - shared by ALL instances (memory efficient)
Animal.prototype.speak = function() {
return `${this.name} says ${this.sound}!`;
};
Animal.prototype.info = function() {
return `Animal: ${this.name}`;
};
const dog = new Animal("Dog", "Woof");
const cat = new Animal("Cat", "Meow");
console.log(dog.speak()); // "Dog says Woof!"
console.log(cat.speak()); // "Cat says Meow!"
// Both share the SAME speak function (memory efficient)
console.log(dog.speak === cat.speak); // true
// Prototype chain
console.log(dog.__proto__ === Animal.prototype); // true
console.log(dog.__proto__.__proto__ === Object.prototype); // true
console.log(dog.__proto__.__proto__.__proto__); // null (end of chain)
// hasOwnProperty vs prototype
console.log(dog.hasOwnProperty("name")); // true (own property)
console.log(dog.hasOwnProperty("speak")); // false (on prototype)
// Object.create - custom prototype
const animalProto = {
speak() { return `${this.name} says ${this.sound}`; }
};
const bird = Object.create(animalProto);
bird.name = "Parrot";
bird.sound = "Squawk";
console.log(bird.speak()); // "Parrot says Squawk"Tip
Tip
You rarely need to write prototype code directly in modern JS - ES6 classes handle it automatically. But understanding prototypes is essential for debugging, reading legacy code, and knowing WHY classes work the way they do.
Every object inherits from its prototype chain
Common Mistake
Warning
Modifying built-in prototypes like Array.prototype or Object.prototype. Adding methods to these affects ALL arrays/objects in your application and any third-party library. This causes hard-to-debug conflicts. Never modify built-in prototypes.
Practice Task
Note
Explore prototypes: (1) Create a Vehicle constructor with make and model. (2) Add a describe method to Vehicle.prototype. (3) Create two instances and verify they share the same method (v1.describe === v2.describe). (4) Walk the prototype chain with __proto__.
Quick Quiz
Key Takeaways
- Every JavaScript object has a hidden link to another object called its prototype.
- Prototype - Every object has a __proto__ (prototype) linking to another object
- Prototype chain - Object → its prototype → its prototype's prototype → ... → null
- Property lookup - JS first checks the object, then its prototype, then the chain, until null