Setting methods through prototype object or in constructor, difference? [duplicate]

by

foxxtrot and annakata are both correct, but I’ll throw in my 2 cents.

If you use the prototype then each instance of the “MessageClass” is really referencing the same functions. The functions exist in memory only once and are used for all instances. If you declare the methods in the constructor (or otherwise add it to a specific instance) rather than the prototype then a new function is created for each instance of MessageClass.

That being said, there is probably not any noticeable performance difference for most cases and it is unlikely that you will see a memory usage difference either. I would go with the prototype method unless you have a compelling reason to do otherwise. The only reason I can thing that you might want to declare a method in the constructor is if you need a closure. For example, if you have event handlers or you wanted to simulate private properties with getters/setters you might do:

function MessageClass() {
    var self = this;
    this.clickHander = function(e) { self.someoneClickedMe = true; };

    var _private = 0;
    this.getPrivate = function() { return _private; };
    this.setPrivate = function(val) { _private = val; };
}

EDIT: Because there has been discussion about how this effects objects extended by another object with functions assigned in the constructor I’m adding a bit more detail. I might use the term “class” to simplify the discussion, but it is important to note that js does not support classes (that doesn’t mean we can’t do good OO development) or we would not be discussing this issue.

Most javascript libraries call the constructor on the base class and the sub class. (e.g. Prototype.js’s Object.extend) This means that methods assigned in the constructor of each will be available on the resulting objects. However, if you are extending objects yourself there can be unexpected consequences.

If I take the MessageClass above and extend it:

function ErrorMessageClass() {}
ErrorMessageClass.prototype = new MessageClass();

errorMsg = new ErrorMessageClass();

Then errorMsg will have a getPrivate and setPrivate method on it, but they may not behave as you would expect. Because those functions were scoped when they were assigned (i.e. at “ErrorMessageClass.prototype = new MessageClass()” not only are the get/setPrivate methods shared, the _private variable gets shared across all instances of ErrorMessageClass as well. This essentially makes _private a static property for ErrorMessageClass. For example:

var errorA = new ErrorMessageClass();
var errorB = new ErrorMessageClass();
errorA.setPrivate('A');
console.log(errorA.getPrivate()); // prints 'A'
console.log(errorB.getPrivate()); // prints 'A'
errorB.setPrivate('B');
console.log(errorA.getPrivate()); // prints 'B'

Likewise with the clickHandler function and someoneClickedMe property:

errorA.clickHandler();
console.log(errorA.someoneClickedMe); // prints 'true'
console.log(errorB.someoneClickedMe); // prints 'true'

However, change those function definitions to use this._private:

this.getPrivate = function() { return this._private; };
this.setPrivate = function(val) { this._private = val; };

and behavior of instances of ErrorMessageClass becomes more of what you would expect:

errorA.setPrivate('A');
errorB.setPrivate('B');
console.log(errorA.getPrivate()); // prints 'A'
console.log(errorB.getPrivate()); // prints 'B'

More Related Contents:

  1. What is the reason to use the ‘new’ keyword at Derived.prototype = new Base
  2. What is the significance of the Javascript constructor property?
  3. What is the `constructor` property really used for? [duplicate]
  4. Can I construct a JavaScript object without using the new keyword?
  5. Advantages of setting the “constructor” Property in the “prototype”
  6. Use of ‘prototype’ vs. ‘this’ in JavaScript?
  7. __proto__ VS. prototype in JavaScript
  8. Is it bad practice to have a constructor function return a Promise?
  9. Understanding the difference between Object.create() and new SomeFunction()
  10. ES6: call class constructor without new keyword
  11. How to detect if a function is called as constructor?
  12. prototype: deep scope of “this” to access instance’s scope
  13. Prototyping Object in Javascript breaks jQuery?
  14. Properties of Javascript function objects
  15. JavaScript: instanceof operator
  16. How can I extend Array.prototype.push()?
  17. Update parent scope variable in AngularJS
  18. What is the significance of the double brackets for the [[prototype]] property in JavaScript?
  19. does javascript’s this object refer to newly created object in the way i think
  20. Traits in javascript [closed]
  21. Objects don’t inherit prototyped functions
  22. Why does String.prototype log it’s object like a standard object, while Array.prototype logs it’s object like a standard array?
  23. Why is JSON.stringify not serializing prototype values?
  24. Why is it impossible to change constructor function from prototype?
  25. this Vs. prototype [duplicate]
  26. What’s the JavaScript’s Object.prototype behavior?
  27. Javascript Number Prototype Set Value Directly [duplicate]
  28. JavaScript: What are .extend and .prototype used for?
  29. JS defineProperty and prototype
  30. [[Prototype]] vs prototype: ..what is the difference? (MyCons.__proto__ === MyCons.prototype) equals FALSE

Leave a Comment