What’s the purpose of prototype? [duplicate]
Solution 1:
Using the prototype makes faster object creation since properties/methods on the prototype don't have to be re-created each time a new object is created.
When you do this:
function animal() {
this.name = 'rover'
this.set_name = function (name) {
this.name = name
}
}
The set_name
method is created every time you create an animal. But when you do this
animal.prototype.set_name = function (name) {
this.name = name
}
The method does not have to be re-created each time; it exists in one place in the prototype. So when you call someAnimal.set_name("Ubu");
the this
context will be set to someAnimal
and (the one and only) set_name
method will be called.
There is one advantage to using the first syntax though: methods created in this manner will have access to private data:
function animal() {
var privateData = 'foo'
this.name = 'rover'
this.set_name = function (name) {
this.name = name
alert(privateData) //will alert 'foo'
}
}
Douglas Crockford calls methods created like this "privileged" for that reason: they have access to both public and private data.
Solution 2:
The difference appears when you create new object from these function
var animal1 = new animal();
All objects created by the first function will have different name
and set_name
properties. However, all objects created by the second function will share the set_name
property.
Solution 3:
In the first example, each separate animal has an own property for the set_name function, while in the second example they share the same function via their prototype.
The advantage of the first version is that the methods can access local (private) variables declared inside the constructor.
The advantage of the second method is that it needs less memory (since you only store the method once instead of a million times) and is more performatic in current JS engines.
Using the second method you can also modify or add methods to a class in a way that also affects instances that were already created.