Prototypes are the mechanism by which JavaScript objects inherit features from one another.
The prototype chain
In the browser's console, try creating an object literal:
const myObject = {
city: "Madrid",
greet() {
console.log(`Greetings from ${this.city}`);
},
};
myObject.greet(); // Greetings from Madrid
This is an object with one data property, city, and one method, greet(). If you type the object's name followed by a period into the console, like myObject., then the console will pop up a list of all the properties available to this object. You'll see that as well as city and greet, there are lots of other properties!
city greet __defineGetter__ __defineSetter__ __lookupGetter__ __lookupSetter__ __proto__ constructor hasOwnProperty isPrototypeOf propertyIsEnumerable toLocaleString toString valueOf
What are these extra properties, and where do they come from?
Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.
When you try to access a property of an object: if the property can't be found in the object itself, the prototype is searched for the property. If the property still can't be found, then the prototype's prototype is searched, and so on until either the property is found, or the end of the chain is reached, in which case undefined is returned.
So when we call myObject.toString(), the browser:
Shadowing properties
What happens if you define a property in an object, when a property with the same name is defined in the object's prototype? Let's see:
const myDate = new Date(1995, 11, 17);
console.log(myDate.getTime()); // 819144000000
myDate.getTime = function () {
console.log("Something else!");
};
myDate.getTime(); // Something else!
This should be predictable, given the description of the prototype chain. When we call getTime() the browser first looks in myDate for a property with that name, and only checks the prototype if myDate does not define it. So when we add getTime() to myDate, then the version in myDate is called.
This is called "shadowing" the property.
Prototype Inheritance
Properties or methods added to the prototype of a constructor function are accessible to all objects derived from it. For example:
function Car(model, year) {
this.model = model;
this.year = year;
};
// Create multiple objects
let c1 = new Car("Mustang", 1964);
let c2 = new Car("Corolla", 1966);
// Add property
Car.prototype.color = "Red";
// Add method
Car.prototype.drive = function() {
console.log(`Driving ${this.model}`);
};
// Display added property using c1 and c2 objects
console.log(`${c1.model} color: ${c1.color}`); // Mustang color: Red
console.log(`${c2.model} color: ${c2.color}`); // Corolla color: Red
// Display added method using c1 and c2 objects
c1.drive(); // Driving Mustang
c2.drive(); // Driving Corolla
In the above example, we created the objects c1 and c2 using the Car() constructor.
We then added the following to the prototype of Car():
- The color Property
- The drive() Method