/**********************************************************************************
This JSFiddle explains different ways to define members on the function and how
these members behave. It explains by defining variables as members, though the
behavior should be same if you define methods.
May not work in some browsers like IE. Better try on Chrome or Opera.
Why? You will understand as you go on reading. :)
**********************************************************************************/
function tempFun(arg1,arg2) {
this.val1 = arg1;
var val2 = arg2;
//Below methods become instance methods when tempFun is
//is invoked as `new tempFun()`, since `new` makes
//`this` inside `tempFun` to point the instance
//being constructed, thus adding function to the
//instance.
//These instance methods are the only way to expose
//closure variable val2 to the outside world of the function
this.getLocalVar = function(){
return val2;
};
this.setLocalVar = function (arg) {
val2 = arg;
};
}
tempFun.prototype.val3 = "fun.proto.var3";
tempFun.val4 = "fun.var4";
var objTempFun1 = new tempFun("this.var1x","var var2x");
var objTempFun2 = new tempFun("this.var1y","var var2y");
/*-----------------------------------------------------------------------
Variables defined as `this.variableName` (val1)
[1] Gets added to function instance when created as `new functionName()`
[2] Have separate values across instances
[3] Cannot be accessed through function directly
-----------------------------------------------------------------------*/
document.write("<br />obj1-this.var1: " + objTempFun1.val1 + "<br />");
document.write("obj2-this.var1: " + objTempFun2.val1 + "<br />");
document.write("fun-this.var1: " + tempFun.val1 + "<br />"); //[3]
objTempFun1.val1 = "this.var1xx";
objTempFun2.val1 = "this.var1yy";
document.write("obj1-this.var1: " + objTempFun1.val1 + "<br />"); //[2]
document.write("obj2-this.var1: " + objTempFun2.val1 + "<br /><br/ >"); //[2]
/*-----------------------------------------------------------------------
Variables defined inside function as `var variableName` (val2)
[1] Are closure-scoped; defined neither on function nor on prototype
[2] Have separate values across function instances
[3] Can only be accessed through instance methods exposing them (as above
getLocalVar and setLocalVar methods)
[4] Cannot be accessed through function or function instance directly
-----------------------------------------------------------------------*/
document.write("obj1-var var2: " + objTempFun1.val2 + "<br />"); //undefined [4]
document.write("obj2-var var2: " + objTempFun2.val2 + "<br />"); //undefined [4]
document.write("fun-var var2: " + tempFun.val2 + "<br />"); //undefined [4]
document.write("obj1-printLocalVar: " + objTempFun1.getLocalVar() + "<br />");
document.write("obj2-printLocalVar: " + objTempFun2.getLocalVar() + "<br />");
objTempFun1.setLocalVar("var var2xx");
objTempFun2.setLocalVar("var var2yy");
document.write("obj1-printLocalVar: " + objTempFun1.getLocalVar() + "<br />");
document.write("obj2-printLocalVar: " + objTempFun2.getLocalVar() + "<br /><br/ >");
/*-----------------------------------------------------------------------
Variables defined as `functionName.prototype.variablename` (val3)
[1] Are declared on prototype
[2] Shared across instances (objTempFun1, objTempFun2) and hence
changing value through one instance or through function reflects
the changes in all
[3] Cannot be accessed through function directly
[4] Can be accessed through the function instance as if they are
defined on instance
[5] Gets hided by the same named variables defined on the instance
[6] Can be accessed using instance members like __proto__,
getPrototypeOf() or constructor.prototype. Though non of them are
browser neutral.
-----------------------------------------------------------------------*/
document.write("obj1-this.proto.var3: " + objTempFun1.val3 + "<br />");
//outputs tempFun.prototype.val3 [4]
document.write("obj2-this.proto.var3: " + objTempFun2.val3 + "<br />");
//outputs tempFun.prototype.val3 [4]
document.write("fun-this.proto.var3: " + tempFun.val3 + "<br />");
//output:undefined [3]
objTempFun1.val3 = "fun.proto.var3x"; //line a
//creates instance variable val3 that hides
//tempFun.prototype.val3 [5]
objTempFun2.val3 = "fun.proto.var3y"; //same as above
objTempFun1.__proto__.val3 = "fun.proto.var3xx"; //works in chrome, opera not in IE
//changes the shared variable val3 defined on prototype
//this also gets reflected in objTempFun2.__proto__.val3
document.write("obj1-this.proto.var3: " + objTempFun1.val3 + "<br />");
//this actually output instance variable var3 created at line a
//which hides prototype variable
document.write("obj2-this.proto.var3: " + objTempFun2.val3 + "<br />");
//same as above
document.write("obj1-this.proto.var3: " + objTempFun1.__proto__.val3 + "<br />");
document.write("obj2-this.proto.var3: " + objTempFun2.__proto__.val3 + "<br /><br/ >");
//fun.proto.var3xx [2]
/*------------------------------------------------------------------------
Variables defined as `functionName.variablename` (val4)
[1] Become member of function or say 'F'unction instance (tempFun)
not the function instances (objTempFun1, objTempFun2)
[2] Cannot be accessed on function instances
------------------------------------------------------------------------*/
document.write("obj1-fun.var4: " + objTempFun1.val4 + "<br />"); //undefined [2]
document.write("obj2-fun.var4: " + objTempFun2.val4 + "<br />"); //undefined [2]
document.write("fun-fun.var4: " + tempFun.val4 + "<br />");