Differences in these Javascript function declarations

Question

Today I saw two different types of Javascript function declarations and I'd like to have a deeper understanding of the two:

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";
};

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

console.log(civic.toString());

and type 2:

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";
   };
}


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

console.log(civic.toString());

Specifically the 'prototype' and the 'this.toString'.

Can anyone impart some pearls of JS wisdom?

possible duplicate of Use of 'prototype' vs. 'this' in Javascript? — Niko
– Niko, Commented Apr 21, 2012 at 23:10

netpro2k · Accepted Answer · 2012-04-21 23:13:17Z

The primary difference here is that in method 2 you are redefining the method with every new instance of Car you create, which is technically less performant.

One nice thing method 2 does afford you however is that you can create truly private instance variables, like so:

function Person( _age ){
    var age = _age;
    this.canDrink = function(){
        return age >= 21;
    }
}

var p = new Person(25);
p.canDrink() // true
p.age // undefined, because age is not exposed directly

Another advantage to method 1 (besides performance) is that you can now change the functionality of all instances of on object. For example:

function Person( _age ){
    this.age = _age;
}
Person.prototype.canDrink = function(){
    return this.age >= 21;
}

var a = new Person(15),
    b = new Person(25);
a.canDrink() // false
b.canDrink() // true

Person.prototype.canDrink = function(){ return true }
a.canDrink() // true
b.canDrink() // true

this would not be possible with method 2 (without changing it for every instance). Age however, is now exposed:

a.age // 15
b.age // 25

Elliot Bonneville · Accepted Answer · 2012-04-21 23:05:20Z

0

this.toString must be defined within the constructor and will only be found on the Car class, not anything inheriting from it (unless specifically included on children classes).

Car.prototype.toString can be defined outside of the constructor and will be found on the prototypes of any classes inheriting from the Car class.

edited Apr 21, 2012 at 23:05

answered Apr 21, 2012 at 22:56

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

5 Comments

Kendall Frey Over a year ago

It depends what you mean by inheritance, since Javascript has no inheritance standard. The way I normally use inheritance, this.toString() is inherited.

Elliot Bonneville Over a year ago

True, true. That's more similar to classical inheritance (although not really :p ), whereas I'm talking about prototypal inheritance.

Kendall Frey Over a year ago

Are you meaning Corvette.prototype = new Car();? I do Corvette.prototype = new Car(); Corvette.prototype.constructor = Corvette;. That seems to be a very effective method of inheritance.

Elliot Bonneville Over a year ago

You could also do something like Car.extend(Corvette);, if I remember the syntax correctly. That's also pretty effective, and efficient to boot.

Elliot Bonneville Over a year ago

Oops, that's right. I knew I had read that somewhere but I didn't attribute it to jQuery. Your method is good, I do something similar actually.

Collectives™ on Stack Overflow

Differences in these Javascript function declarations

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related