What's the difference between this.function and prototype.function?

Question

Given simple JS inheritance, what's the practical difference in the base function between these two examples? In other words, when should a person choose to define a function on "this" instead of on the prototype (or the other way around)?

For me the second example is easier to digest, but how much more is there to this?

function defined on this:

//base var _base = function () {     this.baseFunction = function () {         console.log("Hello from base function");     } }; //inherit from base function _ctor() {     this.property1 = "my property value"; }; _ctor.prototype = new _base(); _ctor.prototype.constructor = _ctor; //get an instance var instance = new _ctor(); console.log(instance.baseFunction); 

function defined on prototype:

//base var _base = function () {}; _base.prototype.baseFunction = function () {     console.log("Hello from base function"); } //inherit from base function _ctor() {     this.property1 = "my property value"; }; _ctor.prototype = new _base(); _ctor.prototype.constructor = _ctor; //get an instance var instance = new _ctor(); console.log(instance.baseFunction); 

Answer 1

Functions on the prototype are only created once and shared between each instance. Functions created in the constructor are created as new objects for each new object created with the constructor.

As a general rule functions should be on the prototype since they will generally not be modified for different objects of the same type, and this has a slight memory/performance benefit. Other properties like objects and arrays should be defined in the constructor, unless you want to create a shared, static property, in which case you should use the prototype.

Its easier to see the distinctions with normal objects or arrays rather than functions

function Foo(){     this.bar = []; } var fooObj1 = new Foo(); var fooObj2 = new Foo();  fooObj1.bar.push("x"); alert(fooObj2.bar) //[] 

as opposed to:

function Foo(){ }  Foo.prototype.bar = [] var fooObj1 = new Foo(); var fooObj2 = new Foo();  fooObj1.bar.push("x"); alert(fooObj2.bar) //["x"]