JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at object prototypes.
Prototype
Every object has a prototype.
Objects inherit from objects call prototypes.
The Prototype Property
The prototype is located in the prototpe property for constructor functions.
Constructor functions have the prototype property that has the methods that returned with the constructor instance.
For instance, if we have a function:
function foo(a, b) {
return a + b;
}
Then we can get its prototype by writing:
console.log(foo.prototype)
It has the constructor property, which is the function itself.
This property is always available as long as we don’t specify otherwise.
Adding Prototype Methods and Properties
We can add properties and methods to the prototype, then they’ll be shared with all instances of the constructor.
For instance, we can write:
function Person(name) {
this.name = name;
this.whoAreYou = function() {
return `I am ${this.name}`;
};
}
Then we have the the name and whoAreYou instance properties.
This will create different copies of the properties for each instance.
But we can share whoAreYou between different instances since it’s the same method.
We can do that by putting it in the prototype property:
function Person(name) {
this.name = name;
}
Person.prototype.whoAreYou = function() {
return `I am ${this.name}`;
};
this.name should be unique between different instances, so it should be in the constructor.
But whoAreYou can be shared, so we add it as a property of the prototype .
Using the Prototype’s Methods and Properties
We can use the prototype’s methods and properties by instantiating the instance of the constructor.
For instance, we can write:
const jane = new Person('jane');
Then we can call whoAreYou by writing:
console.log(jane.whoAreYou())
Then we get:
'I am jane'
Own Properties vs Prototype Properties
Own properties are properties that are defined within the object itself rather than inherited.
Prototype properties are properties that are inherited from another object.
In the Person constructor, we have the prototype.whoAreYou method, which means it’s inherited from the prototype of the Person constructor.
When we get a property or call a method, the JavaScript engine looks through all the properties of the objects in the prototype chain to get the property.
We can’t tell the difference just by looking at the invocation.
So jane.name looks like jane.whoAreYou() but the first is an own property and the 2nd is a prototype property.
We can check by using the constructor property.
For instance, we can write:
console.log(jane.constructor.prototype);
We see the whoAreYou method in the logged object.
Overwriting a Prototype’s Property with an Own Property
We can overwrite a prototype’s property with an own property.
For instance, we can write:
function Person(name) {
this.name = name;
}
Person.prototype.name = 'no name';
Then if we create a Person instance:
const jane = new Person('jane');
We see that jane is:
{name: "jane"}
We can determine if a property is an own property with the hasOwnProperty method.
For instance, if we write:
console.log(jane.hasOwnProperty('name'));
We get true .
We can delete a property with the delete operator.
For instance, we can write:
delete jane.name
to remove it.
Conclusion
An object’s prototype is what an object inherits from.
We can override its properties.
