why to use prototypes over methods

Question

I was watching tutorial about functions. And there is an example

function Car(){
this.running = false
}
Car.prototype.start = function(){
    this.running = true
}
Car.prototype.stop = function(){
    this.running = false
}

var c = new Car()
c.running // false
c.start // true
c.running // true

but there is another way of doing the same thing

function Car(){
    this.running = false;
    this.start = function(){
        this.running = true
    }
    this.stop = function(){
        this.running = false
    }
}

var c = new Car()
c.running // false
c.start // true
c.running // true

Question:

what is pros and cons of using prototypes compared to methods?
when should we avoid/use prototypes?
when should we avoid/use methods?

I think your terminology is a bit off. A method is an object property that is a function - no matter whether this property is an object's own property or a property of the object's prototype. — le_m, Jan 21 '18 at 19:31

simbathesailor · Accepted Answer · 2018-01-22T11:56:13.180

Ideally, whenever you want to share properties among multiple instances of a type, you make use of the prototype. In your first example

function Car() {
  this.running = false
}
Car.prototype.start = function() {
  this.running = true
}
Car.prototype.stop = function() {
  this.running = false
}

var c = new Car()
var d = new Car()
var e = new Car()
console.log(c.__proto__ === d.__proto__) //true
c.running // false
c.start // true
c.running // true

Here prototype object will remain same for c, d and e, Hence you are saving runtime memory consumption as you are reusing same functions for all the three, but with different context.

In your second example

function Car(){
    this.running = false;
    this.start = function(){
        this.running = true
    }
    this.stop = function(){
        this.running = false
    }
}

var c = new Car() // check comparing  c.__proto__ ===  d.__proto__
var d =  new Car()
var e = new Car()
c.running // false
c.start // true
c.running //

Here c, d, e will have their own copy of function, Consuming more memory!! Ideally, one should think about reusability while designing such objects. prototype way seems to better and performant than method way.

score 1 · Answer 2 · answered Jan 21 '18 at 19:46

Prototypes are faster and cheaper in terms of performance and memory usage. In the first example when you call new Car() JavaScript create only 1 object with 1 boolean property. All instances of Car class shares the same methods from its prototype (methods are not duplicated and reference the same memory address, carA.start === carB.start). In the second example, each time you call new Car() you create new functions (different addresses in memory). Each instance has own references to methods (they are not strictly equal, carA.start !== carB.start)
Use methods when you need to implement encapsulation with closures ( I would recommend to use Symbols instead). In all other cases prefer prototypes.

y the way, lookup for property/method by prototype chain is much faster then lookup for closure in V8

Look #2

why to use prototypes over methods

2 Answers2