JavaScript Closures for
Dummies
by Morris Johns
http://blog.morrisjohns.com/javascript_closures_for_dummies
scope
Variables have each function scopes.
not in any functions, global variable
closures
a closure is a stack-frame which is not dealloctated
when the funtion returns. (as if a 'stack-frame'
were malloc'ed instead of being on the stack!)
In JavaScript, if you use the function keyword
inside another function, you are creating a closure.
as soon as there are no more references to the
function that is using the closure, the function/
closures should be garbage collected.
comparative
C pointer
- a pointer to a function
JavaScript reference
- a pointer to a function &
a hidden pointer to a closure
example 3
function say667()
{
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
This example shows that the local variables are not copied - they
are kept by reference. It is kind of like keeping a stack-frame in
memory when the outer function exits
example 4
function setupSomeGlobals()
{
 // Local variable that ends up within closure
 var num = 666;
 // Store some references to functions as global variables
 gAlertNumber = function() { alert(num); }
 gIncreaseNumber = function() { num++; }
 gSetNumber = function(x) { num = x; }
}
All three global functions have a common reference to the same
closure because they are all declared within a single call to
setupSomeGlobals().
JavaScript
prototype, closures and OOP
by Jin Hwa Kim
McDuck
Duck
overview
Bird
var Bird = function() { // constructor
	 var kind = "bird";
	 this.setKind = function(k){ kind = k; };
	 this.getKind = function(){ return kind; };
	 this.fly = function(){ console.log( kind + " do fly." ); };
	 this.sing = function(){ console.log( "lalala." ); };
}
var angrybird = new Bird();
console.log( angrybird.kind ); // undefined
console.log( angrybird.getKind() ); // bird
angrybird.fly(); // bird do fly.
angrybird.sing(); // lalala.
inheritance
In prototype-based programming, objects can be defined
directly from other objects without the need to define any
classes, in which case this feature is called differential
inheritance.
Differential Inheritance is a common inheritance model used by
prototype-based programming languages such as JavaScript, Io
and NewtonScript. It operates on the principle that most objects
are derived from other, more general objects, and only differ in a
few small aspects; while usually maintaining a list of pointers
internally to other objects which the object differs from.
from wikipedia
// Definition of constructor
var Duck = function() {
	 var kind = "duck";
	 this.shape = "beige feathered duck";
	 this.describe = function(){ console.log( this.shape ) };
	 // Overriding, surely.
	 this.fly = function(){ console.log( kind + " can't fly." ); };
};
Duck.prototype = Bird; // not worked
Duck.prototype = new Bird();
var dornald = new Duck();
dornald.describe(); // beige feathered duck
dornald.fly(); // duck can't fly.
dornald.sing(); // lalala.
var McDuck = function() {
	 var kind = "McDuck";
	 var steal = function(){ console.log( "steal the money." ); };
	 this.shape = "white feathered duck";
	 this.tax = function(){ steal(); console.log( "pay the tax." ); };
};
McDuck.prototype = new Duck();
var scrooge = new McDuck();
console.log( scrooge.shape ); // white feathered duck
console.log( scrooge.kind ); // undefined
console.log( scrooge.getKind() ); // bird
console.log( typeof scrooge.steal ); // undefined
scrooge.describe(); // white feathered duck
scrooge.tax(); // steal the money.n pay the tax.
// Polymorphism
var birds = [ angrybird, dornald, scrooge ];
for( var i in birds )
{
	 birds[i].fly(); // bird do fly.n duck can't fly.n duck can't fly.
}
var sum = 0;
function add_t() {
	 var sum = sum + 20;
}
add_t();
alert( ++sum );
use case 1
Prototype's bind() function or Dojo's dojo.lang.hitch() function
use closures.
Inside the function the this keyword becomes a reference to
that scope. The same function can behave differently
depending on its execution scopre.
Prototype can guarantee that your function will execute with
the object you want under the this keyword just by invoking
bind on it.
from Prototype JavaScript framework: Function.bind
(http://www.prototypejs.org/api/function/bind)
use case 2
LCMCalculator.prototype = { ...
gcd: function () {
var a = Math.abs(this.a), b = Math.abs(this.b), t;
if (a < b) { t = b; b = a; a = t; }
while (b !== 0) { t = b; b = a % b; a = t; }
this['gcd'] = function() { return a; };
return a;
}	 ... };
Only need to calculate GCD once, so "redefine" this method. (Actually
not redefinition - it's defined on the instance itself, so that this.gcd
refers to this "redefinition" instead of LCMCalculator.prototype.gcd.)
from wikipedia

JavaScript Closures for Dummies & JavaScript prototype, closures and OOP.

  • 1.
    JavaScript Closures for Dummies byMorris Johns http://blog.morrisjohns.com/javascript_closures_for_dummies
  • 2.
    scope Variables have eachfunction scopes. not in any functions, global variable
  • 3.
    closures a closure isa stack-frame which is not dealloctated when the funtion returns. (as if a 'stack-frame' were malloc'ed instead of being on the stack!) In JavaScript, if you use the function keyword inside another function, you are creating a closure. as soon as there are no more references to the function that is using the closure, the function/ closures should be garbage collected.
  • 4.
    comparative C pointer - apointer to a function JavaScript reference - a pointer to a function & a hidden pointer to a closure
  • 5.
    example 3 function say667() { // Local variable that ends up within closure var num = 666; var sayAlert =function() { alert(num); } num++; return sayAlert; } This example shows that the local variables are not copied - they are kept by reference. It is kind of like keeping a stack-frame in memory when the outer function exits
  • 6.
    example 4 function setupSomeGlobals() {  // Local variable that ends up within closure  var num = 666;  // Store some references to functions as global variables  gAlertNumber =function() { alert(num); }  gIncreaseNumber = function() { num++; }  gSetNumber = function(x) { num = x; } } All three global functions have a common reference to the same closure because they are all declared within a single call to setupSomeGlobals().
  • 7.
  • 8.
  • 9.
    var Bird =function() { // constructor var kind = "bird"; this.setKind = function(k){ kind = k; }; this.getKind = function(){ return kind; }; this.fly = function(){ console.log( kind + " do fly." ); }; this.sing = function(){ console.log( "lalala." ); }; } var angrybird = new Bird(); console.log( angrybird.kind ); // undefined console.log( angrybird.getKind() ); // bird angrybird.fly(); // bird do fly. angrybird.sing(); // lalala.
  • 10.
    inheritance In prototype-based programming,objects can be defined directly from other objects without the need to define any classes, in which case this feature is called differential inheritance. Differential Inheritance is a common inheritance model used by prototype-based programming languages such as JavaScript, Io and NewtonScript. It operates on the principle that most objects are derived from other, more general objects, and only differ in a few small aspects; while usually maintaining a list of pointers internally to other objects which the object differs from. from wikipedia
  • 11.
    // Definition ofconstructor var Duck = function() { var kind = "duck"; this.shape = "beige feathered duck"; this.describe = function(){ console.log( this.shape ) }; // Overriding, surely. this.fly = function(){ console.log( kind + " can't fly." ); }; }; Duck.prototype = Bird; // not worked Duck.prototype = new Bird(); var dornald = new Duck(); dornald.describe(); // beige feathered duck dornald.fly(); // duck can't fly. dornald.sing(); // lalala.
  • 12.
    var McDuck =function() { var kind = "McDuck"; var steal = function(){ console.log( "steal the money." ); }; this.shape = "white feathered duck"; this.tax = function(){ steal(); console.log( "pay the tax." ); }; }; McDuck.prototype = new Duck(); var scrooge = new McDuck(); console.log( scrooge.shape ); // white feathered duck console.log( scrooge.kind ); // undefined console.log( scrooge.getKind() ); // bird console.log( typeof scrooge.steal ); // undefined scrooge.describe(); // white feathered duck scrooge.tax(); // steal the money.n pay the tax.
  • 13.
    // Polymorphism var birds= [ angrybird, dornald, scrooge ]; for( var i in birds ) { birds[i].fly(); // bird do fly.n duck can't fly.n duck can't fly. }
  • 14.
    var sum =0; function add_t() { var sum = sum + 20; } add_t(); alert( ++sum );
  • 15.
    use case 1 Prototype'sbind() function or Dojo's dojo.lang.hitch() function use closures. Inside the function the this keyword becomes a reference to that scope. The same function can behave differently depending on its execution scopre. Prototype can guarantee that your function will execute with the object you want under the this keyword just by invoking bind on it. from Prototype JavaScript framework: Function.bind (http://www.prototypejs.org/api/function/bind)
  • 16.
    use case 2 LCMCalculator.prototype= { ... gcd: function () { var a = Math.abs(this.a), b = Math.abs(this.b), t; if (a < b) { t = b; b = a; a = t; } while (b !== 0) { t = b; b = a % b; a = t; } this['gcd'] = function() { return a; }; return a; } ... }; Only need to calculate GCD once, so "redefine" this method. (Actually not redefinition - it's defined on the instance itself, so that this.gcd refers to this "redefinition" instead of LCMCalculator.prototype.gcd.) from wikipedia