Why should you not add functionality to a JavaScript constructor but instead via prototype?

Question

Im look at Addy Osmani's chapter on the constructor pattern: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript and I came across the following:

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

// Usage:

// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

// and then open our browser console to view the 
// output of the toString() method being called on 
// these objects
console.log( civic.toString() );
console.log( mondeo.toString() );

He said this was not a great thing to do with regards to the this.toString function as it isn't very optimal and isn't shared between all instances of the car type. But he doesn't explain what exactly this means and why it's a bad thing. He recommends to do the following:

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

}


// Note here that we are using Object.prototype.newMethod rather than 
// Object.prototype so as to avoid redefining the prototype object
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};

// Usage:

var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

console.log( civic.toString() );
console.log( mondeo.toString() );

Can someone explain why using the prototype object to add in this functionality is optimal/better?

Hope this will help as well: http://stackoverflow.com/a/16063711/1641941 — HMR, Sep 25 '13 at 17:08

Pointy · Accepted Answer · 2013-09-25T14:39:02.907

6

Functions (well, more generally, properties) on the prototype object are shared by all instances. That single "toString" function will remain just one solitary object no matter how many "Car" instances are made. When you do the assignment in the constructor, a new function object is created for each one.

Obviously, if each instance needs a property that may vary from those of other instances, then you need a per-instance property.

edited Sep 25 '13 at 14:39

answered Sep 25 '13 at 13:35

Pointy

405,095
59
585
614

Very clearly explained. I didn't think of the Prototype object as a sort of stand alone extension to the type (I thought it was instanced hence why I couldn't understand the need for doing it the prototype way). – BenM Sep 25 '13 at 13:38

score 2 · Answer 2 · answered Sep 25 '13 at 13:35

When the function is inside the constructor it will be created for every new instance of the 'class'. So each Car object you create will have it's own toString function taking up extra memory.

If you add the toString via the prototype, it will only exist once and each of the Car objects you create will use this same function.

It also tidies up the constructor code to only include what is relevant to creating the object.

score 2 · Answer 3 · answered Sep 25 '13 at 13:38

Functions on the prototype are shared between every instance. This means that this is the exact same function for every instances, not an identical copy.

If you define the function in the constructor instead, each instance has to create its own version of the function, and then own it for itself. That means if you have 100 instances, you have 100 copies of the function in memory. It also means that updating the function is not fun at all, you would have to do it on every instance.

If the function is in the prototype, updating it in the prototype means every instance now use the updated code (because they all use the same, shared, function)

For example:

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

}

Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};


var civic = new Car( "Honda Civic", 2009, 20000 );

console.log( civic.toString() );

Car.prototype.toString = function () {
  return this.model + " has done " + (this.miles * 1.60934) + " kilometers";
};


console.log( civic.toString() );

Note how I did not need to change the civic instance, it uses the new code and display the distance in kilometers.

score 2 · Answer 4 · answered Sep 25 '13 at 14:08

A typical rule of thumb for me is to set properties that are specific to a given instance such as name, color, etc in the constructor and define functions that a "class" should share as a function on the prototype.

There are also performance ramifications of defining functions on the prototype vs on the constructor. When you define a function on the constructor, each time you use the constructor you are redefining the function again and again...

http://jsperf.com/prototype-vs-instance-functions

You wouldn't want something like name on the prototype because if you went in and changed Car.prototype.name, then you'd change the name for all new instances of Car.

Hope that helps!

Just to clarify; if name was a string you can define it on the prototype as a default value and it will later be shadowed if/when you set a name value for an instance. This should only be done with immutable(in JS is only primitive type) values: http://stackoverflow.com/a/16063711/1641941 — HMR, Sep 25 '13 at 17:06

score 1 · Answer 5 · answered Sep 25 '13 at 13:35

Everytime u run new Car JS parser executes code in constructor, which mean u are creating another

this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };

With prototype approach there is always only one copy of toString().

Why should you not add functionality to a JavaScript constructor but instead via prototype?

5 Answers5