CODEWITHSUNDEEP
javascriptconstructorprototype
NewToJS
NewToJS

Reputation: 2101

Why do we add methods using the prototype property of the constructor function?

One thing I don't understand with prototypes and constructor functions..

Say I have this constructor function that will create an object with a 'name' property and a 'logName' method

function MyExample(param1){
  this.name = param1;
};

MyExample.prototype.logName = function(){
  console.log(this.name);
}

I understand I just added a method (logName) to the constructor function's (myExample) prototype..so that when I create a new object (me) using this constructor function that object will inherit the 'name' property and the 'logName' method. The logName method will be part of new object's (me) proto property

var me = new MyExample('bob');
me.logName(); //bob

..But why not just add the logName method to the object the constructor function is creating? (not the prototype of the constructor function) Wouldn't that provide the same result? Even though 'logName' will not be part of the new object's proto property.

function MyExample(param1){
   this.name = param1;
   this.logName = function(){
      console.log(this.name)
   };
};

var me = new MyExample('bob');
me.logName(); //bob

Upvotes: 8

Views: 1716

Answers (3)

Oriol
Oriol

Reputation: 288710

Adding methods in the prototype gives your code better abstraction.

For example, since the methods are not tied to the instances, you are able to call them on non-instances which are compatible enough. Like this:

Array.prototype.slice.call({0:'a', 1:'b', length:2}); // ["a", "b"]

If you only defined your methods on the instances, it would be necessary to create an useless instance in order to borrow the method:

[].slice.call({0:'a', 1:'b', length:2}); // ["a", "b"]

Additionally, defining a method inside th constructor means that each instance will receive a different copy.

new MyExample('bob').logName === new MyExample('bob').logName // false

This means you will waste more memory.

Upvotes: 0

Mike Cluck
Mike Cluck

Reputation: 32531

The problem with creating the method in the constructor is that it isn't being shared among all instances of MyExample.

Instead, each MyExample has it's own copy of the function. It ends up taking up more memory as the number of instances goes up and if for some reason you want to modify all MyExamples at run time, you have to change every single instances function instead of modifying the prototype.

It's the difference between everyone looking at the same "copy" of Wikipedia versus everyone saving all of Wikipedia to their hard drive and reading that. It pointlessly uses up extra hard drive space and if Wikipedia is updated, everyone is wrong until they download the new version.

If for some reason you need a function which is very similar across instances but will be slightly different for each instance (for example, using closure variables) then creating methods in the constructor may be the right way to go.

Upvotes: 5

Marie
Marie

Reputation: 2217

In your second example you recreate the logName function every time you create a new instance of MyExample. If you use the MyExample's prototype then one logName method is shared across all instances of the MyExample object and context is passed around automatically.

The prototype also allows you to add a new method at a later point that can be accessed by already-existing objects of that type or globally modify a method for all objects of a type.

This question touches on the same topic if you would like more information, Advantages of using prototype, vs defining methods straight in the constructor?

Upvotes: 17

Related Questions