3.1 Prototype Concept
Prototypes are one of the key concepts in JavaScript, allowing objects to inherit properties and methods from other objects. Unlike many other programming languages where inheritance is implemented through classes, in JavaScript it's based on prototypes. Let's dive into what prototypes are, how they work, and how you can use them.
Prototype in JavaScript is an object from which other objects can inherit properties and methods. Every object in JavaScript has a hidden link to another object—a hidden property [[Prototype]], which points to its prototype.
This prototype can have its own prototypes, forming a prototype chain. Properties and methods of an object can be inherited through this chain. This lets objects share functionality and create object hierarchies.
Property proto
In JavaScript, every object has the __proto__ property, which points to its prototype. This property is used to look up properties and methods if they aren't found on the object itself.
In this example, the child object inherits the greet() method from the parent object:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = {
__proto__: parent
};
child.greet(); // Outputs: Hello from parent
3.2 Creating and Using Prototypes
1. Object.create()
The Object.create() method lets you create a new object with a specified prototype.
Example:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.greet(); // Outputs: Hello from parent
2. Adding Properties and Methods to a Prototype
Properties and methods can be added to the prototype so they are accessible to all objects that inherit from it.
In this example, the speak() method is added to the animal prototype and is available to the dog object:
const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // Outputs: Buddy makes a noise.
3. Changing an Object's Prototype
You can change an object's prototype using the Object.setPrototypeOf() method.
In this example, the duck object's prototype is changed from animal to bird:
const animal = {
speak() {
console.log('Animal speaks');
}
};
const bird = {
fly() {
console.log('Bird flies');
}
};
const duck = {
__proto__: animal,
quack() {
console.log('Duck quacks');
}
};
Object.setPrototypeOf(duck, bird);
duck.fly(); // Outputs: Bird flies
duck.quack(); // Outputs: Duck quacks
3.3 Working with Prototypes
1. Checking an Object's Prototype
The Object.getPrototypeOf() method lets you get an object's prototype.
Example:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // Outputs: true
2. Checking Object's Membership in a Prototype
The instanceof operator is used to check if an object is an instance of a particular constructor or prototype.
Example:
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john instanceof Person); // Outputs: true
3. Iterating Over Properties of an Object and Its Prototype
To iterate over properties of an object and its prototype, you can use the for...in loop, which enumerates all enumerable properties.
Example:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
for (let key in child) {
console.log(key);
}
// Outputs:
// name
// greet
To iterate over only the object's own properties, you can use the Object.keys() method or the for...of loop with the Object.entries() method.
Example:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
console.log(Object.keys(child)); // Outputs: ['name']
for (const [key, value] of Object.entries(child)) {
console.log(key, value);
}
// Outputs:
// name Child
GO TO FULL VERSION