javascript - Setting methods through prototype object or in constructor, difference? -

this question has answer here:

• use of 'prototype' vs. 'this' in javascript? 13 answers

could explain difference between setting methods in constructor , through prototype object? following code shows these 2 ways of setting methods - say_hello , say_bye both work fine:

function messageclass() {   this.say_bye = function() { alert('see ya'); }; }  messageclass.prototype.say_hello = function() { alert('hello'); };  x = new messageclass(); x.say_hello(); x.say_bye(); 

foxxtrot , annakata both correct, i'll throw in 2 cents.

if use prototype each instance of "messageclass" referencing same functions. functions exist in memory once , used instances. if declare methods in constructor (or otherwise add specific instance) rather prototype new function created each instance of messageclass.

that being said, there not noticeable performance difference cases , unlikely see memory usage difference either. go prototype method unless have compelling reason otherwise. reason can thing might want declare method in constructor if need closure. example, if have event handlers or wanted simulate private properties getters/setters 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 how effects objects extended object functions assigned in constructor i'm adding bit more detail. might use term "class" simplify discussion, important note js not support classes (that doesn't mean can't oo development) or not discussing issue.

most javascript libraries call constructor on base class , sub class. (e.g. prototype.js's object.extend) means methods assigned in constructor of each available on resulting objects. however, if extending objects there can unexpected consequences.

if take messageclass above , extend it:

function errormessageclass() {} errormessageclass.prototype = new messageclass();  errormsg = new errormessageclass(); 

then errormsg have getprivate , setprivate method on it, may not behave expect. because functions scoped when assigned (i.e. @ "errormessageclass.prototype = new messageclass()" not get/setprivate methods shared, _private variable gets shared across instances of errormessageclass well. makes _private static property errormessageclass. 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 clickhandler function , someoneclickedme property:

errora.clickhandler(); console.log(errora.someoneclickedme); // prints 'true' console.log(errorb.someoneclickedme); // prints 'true' 

however, change function definitions 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 expect:

errora.setprivate('a'); errorb.setprivate('b'); console.log(errora.getprivate()); // prints 'a' console.log(errorb.getprivate()); // prints 'b'