What's the Purpose of Prototype

What’s the purpose of prototype?

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.

What is the use of prototype in Node js?

In short, prototype is used to build the interface (and implementation) of your custom-build objects in JavaScript.

As said Blender in the comment, it's how you do real OOP in JavaScript.

Prototype and constructor in JavaScript (plain English)?

Constructor and protoypes in plain English?

Constructor functions create objects and assign prototypes to them. A prototype is an object with various properties that an object can inherit through the prototype chain. As always, examples help:

function Foo() {
}
Foo.prototype.answer = 42;

var f = new Foo();
console.log(f.answer); // "42"

Foo is a constructor function. When you use new Foo, the object that Foo.prototype points to will become the prototype of the object that gets created. When you do f.answer, since f doesn't have its own property with the name answer, the JavaScript engine looks at f's prototype to see if it has one. Since it does, it uses the value from the prototype and we see "42" in the console. This is how properties are resolved: By looking at an object seeing if it has a property with the given name, and if not, going to its prototype to see if it has the property, and if not going to its prototype, and so on.

Note that a consequence of the above is that adding properties to a prototype after an object has been created using that prototype works just fine; you can use those new properties via the object:

function Foo() {
}
Foo.prototype.answer = 42;

var f = new Foo();
console.log(f.question); // "undefined", neither `f`, nor `Foo.prototype`, nor
                         // `Object.prototype` has a `question` property

Foo.prototype.question = "Life, the Universe, and Everything";
console.log(f.question); // "Life, the Universe, and Everything"

As of ES5, constructor functions are no longer the only way you can assign prototypes to objects. Now you can also do it via Object.create. The above is roughly equivalent to this:

var fooProto = {
    answer: 42
};
var f = Object.create(fooProto);
console.log(f.answer); // "42"

What is the purpose behind using Prototypes and constructors?

To share characteristics between objects. The properties of a prototype can be functions or data, both of which the objects using that prototype have access to and can reuse.

Re your comment below:

I understood the part about sharing characteristics, but could I get some more detailing in to it

Well, consider a Circle constructor:

function Circle(radius) {
    this.r = radius;
}
Circle.prototype.radius = function() {
    return this.r;
};
Circle.prototype.diameter = function() {
    return this.r * 2;
};
Circle.prototype.circumference = function() {
    return 2 * Math.PI * this.r;
};
Circle.prototype.area = function() {
    return Math.PI * this.r * this.r;
};

All objects constructed by Circle will get Circle.prototype as their prototype, and so they all have the handy diameter, circumference, et. al. functions.

var c1 = new Circle(3);
console.log(c1.area());          // 28.274333882308138
console.log(c1.circumference()); // 18.84955592153876

var c2 = new Circle(5);
console.log(c2.area());          // 78.53981633974483
console.log(c2.circumference()); // 31.41592653589793

They share those properties in a memory-efficient way: Each instance doesn't have its own copy of those properties (which would mean keeping each property name and its value in each obejct); instead, they just have a reference to their prototype, which they share, which has those properties.

What is the purpose of using prototype and static method in this factory?

You're correct, you don't have to use a prototype patten in order to achieve this. However, doing this gives you a solid design patten that applies to this particular (and most others) really well. Also when making Preloader into a class like this, it now becomes lot easier to extract this into a library and use in other projects if you wish.

So lets dig into why use a constructor, a static method, and a instance method (in prototype). The answer involves, understanding of classic Object Oriented Programming more than this particular example.

preloadImages static method: Static method is shared across all objects, which means it is used to do tasks that are common to all objects you may want to create for the class PreLoader. In this case, static method 'preLoadImages' is just creating a new Instance of it's own class, passing it all image locations to load, and then returns a promise which can be used to track if all images were loaded.

this: any properties they the author creates in the constructor and assigns to this are basically instance variables are are unique to each object.

function Preloader( imageLocations ) {
     ....
     // I keep track of the current state of the preloader.
     this.state = this.states.PENDING;
     ....
}

prototype: In JavaScript any functions that are added to the 'prototype' object are instance methods, meaning they act individually on the object they are invoked with. A prototype method typically gets access to this object using which it can create, modify or return instance variables.
For example, isInitiated method the author adds to the prototype is checking the this.state of the class PreLoader and returning it, so it can be used in the application.

Preloader.prototype = {
   isInitiated: function isInitiated() {
       return( this.state !== this.states.PENDING );
    }
} 

So why make Preloader into a class? After all its static method is invoking its own controller and creating just one object!

Seems counter intuitive at first. but when you think about how you would use image pre-loader on a typical application, it does make sense. Typically you would like to use Preloader on multiple sets of images across the page or the application. Also factory in angular returns a singleton, and Preloader now conforms to those standards.

To do this now the author doesn't have to repeat the code, but just create another Preloader and start working with it. Its now self contained. Gives progress reports, tells when its done, etc..

What is the purpose of having a function prototype in a function?

A code block may contain any number of declarations. And because a function prototype is a declaration, it may appear in a block.

Granted, it doesn't make much sense to do so logistically as opposed to declaring a function at file scope, but it's syntactically correct.

---

Related Topics