Advantages of using prototype, vs defining methods straight in the constructor? [duplicate]

by

Methods that inherit via the prototype chain can be changed universally for all instances, for example:

function Class () {}
Class.prototype.calc = function (a, b) {
    return a + b;
}

// Create 2 instances:
var ins1 = new Class(),
    ins2 = new Class();

// Test the calc method:
console.log(ins1.calc(1,1), ins2.calc(1,1));
// -> 2, 2

// Change the prototype method
Class.prototype.calc = function () {
    var args = Array.prototype.slice.apply(arguments),
        res = 0, c;

    while (c = args.shift())
        res += c;

    return res; 
}

// Test the calc method:
console.log(ins1.calc(1,1,1), ins2.calc(1,1,1));
// -> 3, 3

Notice how changing the method applied to both instances? This is because ins1 and ins2 share the same calc() function. In order to do this with public methods created during construction, you’d have to assign the new method to each instance that has been created, which is an awkward task. This is because ins1 and ins2 would have their own, individually created calc() functions.

Another side effect of creating methods inside the constructor is poorer performance. Each method has to be created every time the constructor function runs. Methods on the prototype chain are created once and then “inherited” by each instance. On the flip side of the coin, public methods have access to “private” variables, which isn’t possible with inherited methods.

As for your function Class() {} vs var Class = function () {} question, the former is “hoisted” to the top of the current scope before execution. For the latter, the variable declaration is hoisted, but not the assignment. For example:

// Error, fn is called before the function is assigned!
fn();
var fn = function () { alert("test!"); } 

// Works as expected: the fn2 declaration is hoisted above the call
fn2();
function fn2() { alert("test!"); }

More Related Contents:

  1. Javascript object members that are prototyped as arrays become shared by all class instances
  2. Defining a Javascript prototype
  3. Properties of Javascript function objects
  4. Objects don’t inherit prototyped functions
  5. Why is it impossible to change constructor function from prototype?
  6. What does the new keyword do under the hood?
  7. Null error is coming in javascript
  8. How do I remove a property from a JavaScript object?
  9. Use of ‘prototype’ vs. ‘this’ in JavaScript?
  10. Use of .apply() with ‘new’ operator. Is this possible?
  11. Organize prototype javascript while perserving object reference and inheritance
  12. Constructor function vs Factory functions
  13. How is almost everything in Javascript an object?
  14. Preserving a reference to “this” in JavaScript prototype functions [duplicate]
  15. Defining methods via prototype vs using this in the constructor – really a performance difference?
  16. How do I make JavaScript Object using a variable String to define the class name?
  17. What techniques can be used to define a class in JavaScript, and what are their trade-offs?
  18. JS : Convert Array of Strings to Array of Objects
  19. Does JavaScript have the interface type (such as Java’s ‘interface’)?
  20. Sorting objects by property values
  21. No ways to have class-based objects in javascript?
  22. Setting methods through prototype object or in constructor, difference? [duplicate]
  23. Why should you not use Number as a constructor? [duplicate]
  24. Update parent scope variable in AngularJS
  25. How adding event handler inside a class with a class-method as the callback?
  26. In Javascript, what does this underscore mean?
  27. Classical Vs prototypal inheritance
  28. Is John Resig’s Javascript inheritance snippet deprecated?
  29. How do I create an abstract base class in JavaScript?
  30. this Vs. prototype [duplicate]

Leave a Comment