Docs
README
7.5 Prototypes
Table of Contents
- •Introduction
- •What is a Prototype?
- •The Prototype Chain
- •Accessing Prototypes
- •Setting Prototypes
- •Prototype Inheritance
- •Constructor Functions and Prototypes
- •The
prototypeProperty - •Shadowing Properties
- •Best Practices
Introduction
Prototypes are JavaScript's mechanism for inheritance. Every object in JavaScript has a hidden internal property called [[Prototype]] that references another object.
┌─────────────────────────────────────────────────────────────┐
│ JavaScript Prototype System │
├─────────────────────────────────────────────────────────────┤
│ │
│ Every object has a [[Prototype]] │
│ ┌─────────────┐ │
│ │ myObj │ │
│ │ ───────── │ │
│ │ name: "X" │──────► [[Prototype]] │
│ └─────────────┘ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │Object.proto │ │
│ │ ───────── │ │
│ │ toString() │ │
│ │ valueOf() │ │
│ └─────────────┘ │
│ │ │
│ ▼ │
│ null │
│ │
└─────────────────────────────────────────────────────────────┘
What is a Prototype?
A prototype is an object from which other objects inherit properties. When you try to access a property on an object:
- •JavaScript first looks for the property on the object itself
- •If not found, it looks on the object's prototype
- •This continues up the prototype chain until found or reaching
null
const animal = {
eats: true,
walk() {
console.log('Walking...');
},
};
const rabbit = {
jumps: true,
};
// Set animal as rabbit's prototype
Object.setPrototypeOf(rabbit, animal);
console.log(rabbit.jumps); // true (own property)
console.log(rabbit.eats); // true (inherited from animal)
rabbit.walk(); // "Walking..." (inherited method)
The Prototype Chain
┌─────────────────────────────────────────────────────────────────────┐
│ Prototype Chain Example │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ rabbit animal Object.prototype │
│ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│ │ jumps: │ proto │ eats: │ proto │ toString() │ │
│ │ true │─────────► │ true │───────► │ valueOf() │ │
│ │ │ │ walk() │ │ hasOwnProp() │ │
│ └──────────┘ └──────────┘ └──────────────┘ │
│ │ │
│ ▼ │
│ null │
│ │
│ Property Lookup for rabbit.toString(): │
│ 1. Not in rabbit ──► 2. Not in animal ──► 3. Found in Object.proto│
│ │
└─────────────────────────────────────────────────────────────────────┘
const rabbit = { jumps: true };
const animal = { eats: true };
Object.setPrototypeOf(rabbit, animal);
// Prototype chain lookup
console.log(rabbit.hasOwnProperty('jumps')); // true
console.log(rabbit.hasOwnProperty('eats')); // false (inherited)
// Check the chain
console.log(Object.getPrototypeOf(rabbit) === animal); // true
console.log(Object.getPrototypeOf(animal) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null
Accessing Prototypes
Object.getPrototypeOf()
The recommended way to get an object's prototype:
const arr = [1, 2, 3];
const proto = Object.getPrototypeOf(arr);
console.log(proto === Array.prototype); // true
proto (Deprecated)
The legacy way - avoid in new code:
const obj = {};
console.log(obj.__proto__ === Object.prototype); // true
// Works but deprecated
obj.__proto__ = { custom: true };
isPrototypeOf()
Check if an object is in another's prototype chain:
const animal = { eats: true };
const rabbit = Object.create(animal);
console.log(animal.isPrototypeOf(rabbit)); // true
console.log(Object.prototype.isPrototypeOf(rabbit)); // true
Setting Prototypes
Object.create()
Create object with specific prototype (recommended):
const personProto = {
greet() {
return `Hello, I'm ${this.name}`;
},
get info() {
return `${this.name}, ${this.age} years old`;
},
};
const john = Object.create(personProto);
john.name = 'John';
john.age = 30;
console.log(john.greet()); // "Hello, I'm John"
console.log(john.info); // "John, 30 years old"
Object.setPrototypeOf()
Change an existing object's prototype (use sparingly):
const dog = { barks: true };
const animal = { eats: true };
Object.setPrototypeOf(dog, animal);
console.log(dog.eats); // true
// ⚠️ Warning: This is slow - avoid if possible
Object.create(null)
Create object with no prototype:
const pureDict = Object.create(null);
pureDict.key = 'value';
console.log(pureDict.toString); // undefined (no Object.prototype)
console.log('key' in pureDict); // true
// Useful for dictionaries to avoid prototype pollution
Prototype Inheritance
┌─────────────────────────────────────────────────────────────┐
│ Prototype Inheritance Pattern │
├─────────────────────────────────────────────────────────────┤
│ │
│ // Base prototype │
│ const vehicle = { │
│ start() { console.log("Starting..."); }, │
│ stop() { console.log("Stopping..."); } │
│ }; │
│ │
│ // Child prototype inherits from vehicle │
│ const car = Object.create(vehicle); │
│ car.honk = function() { console.log("Beep!"); }; │
│ │
│ // Instance inherits from car (and vehicle) │
│ const myCar = Object.create(car); │
│ myCar.make = "Toyota"; │
│ │
│ myCar.start(); // "Starting..." (from vehicle) │
│ myCar.honk(); // "Beep!" (from car) │
│ │
└─────────────────────────────────────────────────────────────┘
Example: Multi-Level Inheritance
// Level 1: Base
const living = {
breathe() {
console.log(`${this.name} is breathing`);
},
};
// Level 2: Inherits from living
const animal = Object.create(living);
animal.eat = function () {
console.log(`${this.name} is eating`);
};
// Level 3: Inherits from animal
const dog = Object.create(animal);
dog.bark = function () {
console.log(`${this.name} says woof!`);
};
// Instance
const rex = Object.create(dog);
rex.name = 'Rex';
rex.breathe(); // "Rex is breathing"
rex.eat(); // "Rex is eating"
rex.bark(); // "Rex says woof!"
Constructor Functions and Prototypes
When you create objects with new, the constructor's prototype property becomes the new object's [[Prototype]].
┌─────────────────────────────────────────────────────────────────────┐
│ Constructor Function and prototype Property │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ function Person(name) { Person.prototype │
│ this.name = name; ┌─────────────────┐ │
│ } │ constructor: │ │
│ ┌──────────►│ Person │ │
│ Person.prototype ────┘ │ greet: fn() │ │
│ └─────────────────┘ │
│ ▲ │
│ const john = new Person("John") │ [[Prototype]] │
│ ┌──────────────┐ │ │
│ │ name: "John" │────────────────────────┘ │
│ └──────────────┘ │
│ │
│ john.greet() → looks in john → not found → looks in prototype │
│ │
└─────────────────────────────────────────────────────────────────────┘
function Person(name, age) {
this.name = name;
this.age = age;
}
// Add methods to prototype (shared by all instances)
Person.prototype.greet = function () {
return `Hi, I'm ${this.name}`;
};
Person.prototype.birthday = function () {
this.age++;
return `Happy birthday! Now ${this.age}`;
};
const alice = new Person('Alice', 30);
const bob = new Person('Bob', 25);
console.log(alice.greet()); // "Hi, I'm Alice"
console.log(bob.greet()); // "Hi, I'm Bob"
// Both share the same prototype methods
console.log(alice.greet === bob.greet); // true
console.log(Object.getPrototypeOf(alice) === Person.prototype); // true
The prototype Property
Only functions have a prototype property. This is NOT the function's own prototype - it's the prototype that will be assigned to objects created with new.
┌─────────────────────────────────────────────────────────────────────┐
│ prototype vs [[Prototype]] │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Function.prototype ← Function's OWN prototype (for inheritance)│
│ │
│ MyFunction.prototype ← Template for objects created with `new` │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ function Dog(name) { │ │
│ │ this.name = name; │ │
│ │ } │ │
│ │ │ │
│ │ Dog.prototype.bark = function() { ... } │ │
│ │ ↑ │ │
│ │ This is what new Dog() instances will inherit from │ │
│ │ │ │
│ │ Object.getPrototypeOf(Dog) === Function.prototype │ │
│ │ ↑ │ │
│ │ This is Dog's own prototype (it inherits from Function) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
function Dog(name) {
this.name = name;
}
// Dog.prototype - template for instances
Dog.prototype.bark = function () {
console.log('Woof!');
};
// Dog's own prototype - it's a function
console.log(Object.getPrototypeOf(Dog) === Function.prototype); // true
const rex = new Dog('Rex');
// rex's prototype is Dog.prototype
console.log(Object.getPrototypeOf(rex) === Dog.prototype); // true
// The constructor property
console.log(Dog.prototype.constructor === Dog); // true
console.log(rex.constructor === Dog); // true
Shadowing Properties
When an object has a property with the same name as one in its prototype, the object's property "shadows" the prototype's.
const parent = {
value: 10,
getValue() {
return this.value;
},
};
const child = Object.create(parent);
child.value = 20; // Shadows parent.value
console.log(parent.getValue()); // 10
console.log(child.getValue()); // 20 (uses child.value)
// Check where properties come from
console.log(child.hasOwnProperty('value')); // true
console.log(child.hasOwnProperty('getValue')); // false
// Delete shadows to reveal inherited
delete child.value;
console.log(child.getValue()); // 10 (now uses parent.value)
Shadowing with Getters/Setters
const parent = {
_value: 10,
get value() {
return this._value;
},
set value(v) {
this._value = v;
},
};
const child = Object.create(parent);
// This uses parent's setter, setting _value on child
child.value = 20;
console.log(child._value); // 20 (own property)
console.log(parent._value); // 10 (unchanged)
console.log(child.value); // 20
Common Prototype Patterns
Extending Built-in Prototypes (Use Carefully!)
// Adding to Array.prototype (generally discouraged)
if (!Array.prototype.last) {
Object.defineProperty(Array.prototype, 'last', {
get() {
return this[this.length - 1];
},
});
}
const arr = [1, 2, 3];
console.log(arr.last); // 3
Prototype-Based Mixin
const canWalk = {
walk() {
console.log(`${this.name} is walking`);
},
};
const canSwim = {
swim() {
console.log(`${this.name} is swimming`);
},
};
const canFly = {
fly() {
console.log(`${this.name} is flying`);
},
};
// Create a duck with multiple capabilities
function Duck(name) {
this.name = name;
}
Object.assign(Duck.prototype, canWalk, canSwim, canFly);
const donald = new Duck('Donald');
donald.walk(); // "Donald is walking"
donald.swim(); // "Donald is swimming"
donald.fly(); // "Donald is flying"
Best Practices
1. Use Object.create() for Prototypal Inheritance
// ✓ Good
const child = Object.create(parent);
// ✗ Avoid
child.__proto__ = parent;
2. Don't Modify Object.prototype
// ✗ Very dangerous - affects ALL objects
Object.prototype.myMethod = function () {};
// ✓ Create your own base object
const myBase = {
myMethod() {},
};
3. Use Object.hasOwn() to Check Own Properties
// ✓ Good (ES2022+)
if (Object.hasOwn(obj, 'prop')) {
}
// ✓ Also good (older approach)
if (Object.prototype.hasOwnProperty.call(obj, 'prop')) {
}
// ✗ Can be overridden
if (obj.hasOwnProperty('prop')) {
}
4. Prefer Composition Over Inheritance
// ✓ Good - Composition
const canFly = (obj) => ({
fly() {
console.log(`${obj.name} flies`);
},
});
const bird = { name: 'Eagle' };
Object.assign(bird, canFly(bird));
// Rather than deep inheritance chains
5. Use Classes for Constructor-Based Patterns
// ✓ Modern - clearer syntax
class Animal {
constructor(name) {
this.name = name;
}
speak() {}
}
class Dog extends Animal {
bark() {}
}
Summary Table
| Concept | Description |
|---|---|
[[Prototype]] | Internal link to prototype object |
Object.getPrototypeOf() | Get an object's prototype |
Object.setPrototypeOf() | Set an object's prototype |
Object.create() | Create object with specific prototype |
Func.prototype | Template for objects created with new Func() |
instanceof | Check if object inherits from constructor |
isPrototypeOf() | Check if object is in prototype chain |
Files in This Section
- •
README.md- This documentation - •
examples.js- Runnable code examples - •
exercises.js- Practice exercises with solutions
Navigation
- •Previous: 7.4 Object Static Methods
- •Next: 7.6 Object Patterns
- •Back to Module 7