0

Why would I attach a method to the prototype VS. the constructor function? In the simple test code below they are called the same and they produce identical results in both instances. I'm sure there must be a benefit for each method but I'm not sure what that might be.

In this first text code I attach the .totalCost() method directly to the constructor and it works as expected in the new instance.

"use strict";

function Aircraft(a, b, c) {
    this.manufacturer = a;
    this.numberOfEngines = b;
    this.costPerEngine = c;
    this.totalCost = function() {
        return this.numberOfEngines * this.costPerEngine;
    }
}

let thunderbolt = new Aircraft('Republic', 1, 25000);

console.log(thunderbolt.totalCost());

In the next test code I attach the .totalCost() method to the prototype which also works just fine in the new instance.

"use strict";

function Aircraft(a, b, c) {
    this.manufacturer = a;
    this.numberOfEngines = b;
    this.costPerEngine = c;
    Aircraft.prototype.totalCost = function() {
        return this.numberOfEngines * this.costPerEngine;
    }
}

let thunderbolt = new Aircraft('Republic', 1, 20000);

console.log(thunderbolt.totalCost());

Thanks so much for any input!

DR01D
  • 1,245
  • 9
  • 21

1 Answers1

3

By attaching a method to a prototype, each instance of the object doesn't have to store the exact same method, thus reducing the memory footprint.

Since methods (behaviors) don't often vary from instance to instance, individual instances don't need to store the same behavior. By putting it on the prototype, all instances will just inherit it.

And, when setting the method on the prototype, do so outside of the constructor function, otherwise each instance will just re-create the same method on the one prototype, causing the last method to be overwritten by the exact same new method.

"use strict";

function Aircraft(a, b, c) {
    this.manufacturer = a;
    this.numberOfEngines = b;
    this.costPerEngine = c;
}

// Prototype modifications should happen outside of the 
// constructor function so that they are processed just 
// once and not every time the constructor is invoked.
Aircraft.prototype.totalCost = function() {
  return this.numberOfEngines * this.costPerEngine;
}

// At this point, the prototype is all set, so calling the 
// constructor (which inherits from the prototype) creates
// a new object instance that has inherited the method.
let thunderbolt = new Aircraft('Republic', 1, 20000);

console.log(thunderbolt.totalCost());
Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
  • 1
    @DR01D My answer addresses this. By setting the method on the prototype, but outside of the constructor function, you don't wind up with each new instance overwriting the exact same method that is already on the prototype. Yes, it's a performance thing all around. – Scott Marcus Apr 13 '18 at 22:00
  • 1
    I guarantee this is a really useful answer to a lot of people new to Javascript! I've seen these patterns 100 times and never quite understood them. Thanks so much! – DR01D Apr 13 '18 at 22:00