In JavaScript, prototypes are a fundamental and powerful feature that underpins the language's object-oriented programming paradigm. A prototype is essentially an object from which other objects inherit properties and methods. Understanding prototypes is crucial for grasping how inheritance works in JavaScript, as it relies on prototype chains to share functionalities between objects.
The Prototype Property
Every JavaScript function (which is also an object in JavaScript) has a prototype
property, which is an object. When you create objects using a constructor function or class syntax (which is syntactic sugar over constructor functions), these objects inherit properties and methods from the constructor function's prototype
object.
For example:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const alice = new Person('Alice');
alice.greet(); // Output: Hello, my name is Alice
In this example, alice
inherits the greet
method from Person.prototype
. This means that all instances of Person
can use the greet
method, but the method itself is stored in only one location in memory, which is efficient.
The [[Prototype]]
Property
In addition to the prototype
property that functions have, each JavaScript object has an internal and hidden property known as [[Prototype]]
(often accessible via __proto__
in many JavaScript engines, though this is deprecated in favor of Object.getPrototypeOf()
). This [[Prototype]]
property is a reference to another object from which the current object inherits properties and methods.
When you try to access a property or method of an object, JavaScript first looks at the object's own properties. If it doesn't find it there, it follows the [[Prototype]]
chain upwards and looks for the property in the object's prototype, then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain (the prototype of Object.prototype
, which is null
).
Prototype Chain
The prototype chain is the series of links between an object's prototype and its ancestors' prototypes. This chain allows for property and method inheritance in JavaScript. For example:
let animal = {
eats: true,
walk() {
console.log("Animal walk");
}
};
let rabbit = Object.create(animal);
rabbit.jump = function() {
console.log("Rabbit jump");
};
rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true
Here, rabbit
inherits from animal
via its prototype chain. Even though rabbit
doesn't have its own walk
method or eats
property, it can access those defined on animal
because animal
is in rabbit
's prototype chain.
Key Points
- The
prototype
property is used primarily for defining methods and properties that should be inherited by instances created from a constructor function. - The
[[Prototype]]
property (often accessed viaObject.getPrototypeOf()
or__proto__
, though the latter is deprecated) is a reference to the object from which the current object inherits. - JavaScript uses the prototype chain to look up properties and methods: if an object doesn't have a property/method, JavaScript tries to find it on the object's prototype, then the prototype's prototype, and so on.