JavaScript uses a prototype-based inheritance model, where objects can inherit properties and methods from other objects. Let’s dive into how prototypes work.
1. Object Prototypes
In JavaScript, every object has a prototype, which is another object that it inherits properties and methods from. You can access an object’s prototype using the Object.getPrototypeOf() method.
// Object prototype
const animal = {
makeSound: function() {
console.log("Generic animal sound");
},
};
// Object with inheritance
const cat = Object.create(animal);
cat.name = "Whiskers";
cat.makeSound = function() {
console.log("Meow!");
};
cat.makeSound(); // Output: Meow!
// Accessing the prototype
const catPrototype = Object.getPrototypeOf(cat);
console.log(catPrototype === animal); // Output: true2. Constructor Functions and Prototypes
When you create objects using constructor functions, each instance shares a common prototype. This allows you to define methods once in the prototype, saving memory and promoting code reusability.
// Constructor function
function Person(name, age) {
this.name = name;
this.age = age;
}
// Adding a method to the prototype
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};
// Creating objects using the constructor
const alice = new Person("Alice", 30);
const bob = new Person("Bob", 25);
alice.greet(); // Output: Hello, my name is Alice and I'm 30 years old.
bob.greet(); // Output: Hello, my name is Bob and I'm 25 years old.3. Prototypal Chain
Objects can form a chain of prototypes, known as the prototypal chain. If a property or method is not found on an object, JavaScript looks up the chain until it finds the property or reaches the end of the chain.
// Base object
const baseObject = {
baseProperty: "I'm in the base object",
};
// Object with inheritance
const derivedObject = Object.create(baseObject);
derivedObject.derivedProperty = "I'm in the derived object";
console.log(derivedObject.baseProperty); // Output: I'm in the base object
console.log(baseObject.derivedProperty); // Output: undefinedConclusion
Prototypes are a fundamental aspect of JavaScript’s inheritance model. They enable objects to inherit properties and methods, providing a mechanism for code reuse and structuring complex applications. Understanding prototypes is essential for effective object-oriented programming in JavaScript.
Leave a Reply