Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Constructor Functions and Prototypes Methods with Prototypes

Posted by Jonathan Sandlund
Jonathan Sandlund
3,972 Points

When to assign values / methods to prototypes vs. Constructor functions?

Hey Andrew,

Really enjoying this course! Thanks for updating it! I had a couple quick questions:

Is there a rule of thumb for when to assign methods / values to the prototype of a constructor function, versus including it directly?

Also: if we have a constructor object with dozens of methods, should we assign each individually — or is it better practice to pass in an object? e.g.

Car.prototype = { method1: function(){...}, method2: function(){...}, etc. }

2 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Is there a rule of thumb for when to assign methods / values to the prototype of a constructor function, versus including it directly?

I'd always say methods on the prototype because of the memory overhead having the method created over and over in the constructor. I'd say properties on the instance (on this in the constructor) which are unique values. Putting properties on the prototype are good for creating default values, that can be eventually overriden (is that a word?) in the instance.

Also: if we have a constructor object with dozens of methods, should we assign each individually — or is it better practice to pass in an object? e.g.

You can do that too. The prototype is just an object literal on a constructor function, that's shared once in memory with all the instances, rather doing something over an over again. So assigning an object literal to the prototype property as you described above is another way to do it.

Christopher Aporta
Christopher Aporta
24,258 Points
Christopher Aporta
Christopher Aporta
24,258 Points

Hey Andrew Chalkley,

I had a question about the last portion of your answer re: assigning methods individually or via an object literal on the prototype.

Please consider the following breakdown of the two approaches...

//INDIVIDUAL ASSIGNMENT APPROACH

function Car() {};
  //undefined

var car1 = new Car();
  //undefined

car1.constructor === Car;
  //true

Car.prototype.roll = function () {
  console.log("rolling!");
};
  //function Car.roll()

var car2 = new Car();
  //undefined

car2.constructor === Car;
  //true

// LITERAL APPROACH

function Car() {};
  //undefined

var car1 = new Car();
  //undefined

car1.constructor === Car;
  //true

Car.prototype = {
  roll: function() {
    console.log("rolling!");
  }
};
  //Object {}

var car2 = new Car();
  //undefined

car2.constructor === Car;
  //false ?!?

It seems that taking the literal assignment approach will unintentionally overwrite the "constructor" property of the prototype. While I don't know the specific implications of doing so, I assume that it's probably not something we want to happen.

Can you shed some light on this? Thanks!

Christopher Aporta
Christopher Aporta
24,258 Points

Andrew Chalkley

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hi Christopher Aporta

When you're assigned the prototype as an object literal you do actually need to fix the constructor. However it's still an instance of a Car!

console.log(car2 instanceof Car);
//true

What is a {}? It's an Object literal, it's constructor is Object.

console.log(car2.constructor === Object);

You can do something like this:

Car.prototype = {
  constructor: Car,
  roll: function() {
    console.log("rolling!");
  }
};

To fix the constructor or:

Car.prototype = {
    roll: function() {
    console.log("rolling!");
  }
};

Car.prototype.constructor = Car;

Your Car variable is in the global scope so you can always do new Car() without any issues and it's still and instance of a Car even with the broken constructor. You're not doing new Car.prototype.constructor(). The problems can arise if the constructor function points somewhere else and you're doing some meta programming or crazy inheritance stuff where you need the constructor of a Type that you don't know the global name of it to generate new objects. But you should still have a reference to the parent object anyway...so I'm having trouble thinking of examples.

Anyway fix the constructor if you do it the Object literal way or do each one assigned to not have to remember to do that!