Use of 'prototype' vs. 'this' in JavaScript? -

what's difference between

var = function () {     this.x = function () {         //do     }; }; 

and

var = function () { }; a.prototype.x = function () {     //do }; 

the examples have different outcomes.

before looking @ differences, following should noted:

• a constructor's prototype provides way share methods , values among instances via instance's private [[prototype]] property.
• a function's this set how function called or use of bind (not discussed here). function called on object (e.g. myobj.method()) this within method references object. this not set call or use of bind, defaults global object (window in browser) or in strict mode, remains undefined.
• javascript object oriented language, i.e. object, including functions.

so here snippets in question:

var = function () {     this.x = function () {         //do     }; }; 

in case, variable a assigned value reference function. when function called using a(), function's this isn't set call defaults global object , expression this.x window.x. result reference function expression on right hand side assigned window.x.

in case of:

var = function () { }; a.prototype.x = function () {     //do }; 

something different occurs. in first line, variable a assigned reference function. in javascript, functions objects have prototype property default there no separate code create a.prototype object.

in second line, a.prototype.x assigned reference function. create x property if doesn't exist, or assign new value if does. difference first example object's x property involved in expression.

another example below. it's similar first 1 (and may meant ask about):

var = new function () {     this.x = function () {         //do     }; }; 

in example, new operator has been added before function expression function called constructor. when called new, function's this set reference new object private [[prototype]] property set reference constructor's public prototype. in assignment statement, x property created on new object. when called constructor, function returns this object default, there no need separate return this; statement.

to check a has x property:

console.log(a.x) // function () {                  //   //do                  // }; 

this uncommon use of new, since way reference constructor via a.constructor. more common do:

var = function () {     this.x = function () {         //do     }; }; var = new a(); 

another way of achieving similar result use invoked function expression:

var = (function () {     this.x = function () {         //do     }; }()); 

in case, a assigned return value of calling function on right hand side. here again, since this not set in call, reference global object , this.x window.x. since function doesn't return anything, a have value of undefined.

these differences between 2 approaches manifest if you're serializing , de-serializing javascript objects to/from json. methods defined on object's prototype not serialized when serialize object, can convenient when example want serialize data portions of object, not it's methods:

var = function () {      this.objectsownproperties = "are serialized"; }; a.prototype.prototypeproperties = "are not serialized"; var instance = new a(); console.log(instance.prototypeproperties); // "are not serialized" console.log(json.stringify(instance));  // {"objectsownproperties":"are serialized"}  

related questions:

• what mean javascript prototypal language?
• what scope of function in javascript?
• how "this" keyword work?

sidenote: there may not significant memory savings between 2 approaches, using prototype share methods , properties use less memory each instance having own copy.

javascript isn't low-level language. may not valuable think of prototyping or other inheritance patterns way explicitly change way memory allocated.