Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What’s the purpose of prototype? [duplicate]

People also ask

What is purpose of prototype in JavaScript?

A prototype is an existing inbuilt functionality in JavaScript. Whenever we create a JavaScript function, JavaScript adds a prototype property to that function. A prototype is an object, where it can add new variables and methods to the existing object.

What is prototype in JavaScript stackoverflow?

1. 13. -1: prototype is a property of constructor functions, not instances, ie your code is wrong!


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.


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.


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.