Study Address: Http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
1, a simple implementation of closures
Example 1
function SayHello (name) {
var words = "Hello," + name;
var sayforalert = function () {
alert (words);
}
Sayforalert ();
}
SayHello ("Jack");
/*
An Example of a Closure
Sentence summaries:
A closure is the local variables for a function-kept alive after the function has returned, or
A closure is a stack-frame which was not deallocated when the function returns (as if a ' stack-frame ' were malloc ' Ed Instea D of being on the stack!).
*/
function SayHello2 (name) {
var words = "Hello," +name; local variables;
var sayforalert = function () {
alert (words);
}
return sayforalert;
}
var say2 = SayHello2 ("Lucy");
Say2 ();
/*
A reference to a function, returned as a parameter. This is the equivalent of returning a function
Pointer. Sayforalert and Say2 point to the same function.
An important difference between Javascrip and C is that the C pointer points to a function, and JavaScript is a reference to a function. (equivalent to a hidden pointer).
In many languages, like C, local variables can no longer be accessed when the function is completed.
Because the stack of its functions is destroyed.
In JavaScript, functions can be declared inside the function. And local variables can be accessed, and
It is returned in the declared function.
*/
function Saynumadd () {
var num = 666;
var showalert = function () {
alert (num);
Num++;//place 2;
}
Num++;//place 1;
return showalert;
}
var saynumber = Saynumadd ();
Saynumber ();//alert 667;
/*
Note: According to the above results, NUM is saved as a variable in the back.
The call to the function can be obtained again. If we put num++ in the Place2 position.
The result is 666. Explain the execution sequence of functions saynumadd () execution procedure
In 1, declare the variable num,2, declare the function showalert,3, add the variable num from 1;
When we execute Saynumber (), we see the result of 667 increase.
*/
function Setupsomeglobals () {
var num = 666;
Store some references to function as global variables
Getalertnumber = function () {
alert (num);
}
Getincreasenumber = function () {
num + +;
}
Getsetnumber = function (x) {
num = x;
}
}
Setupsomeglobals ();
Getincreasenumber ();
Getalertnumber ();
Getsetnumber (10);
Getalertnumber ();//10
Setupsomeglobals ();
Getalertnumber ();//666
/*
Onte:
As can be seen from the above example,
The three functions inside the setupsomeglobals are declared to have permission to access the variables inside.
If we re-call Setupsomeglobals () The new function stack will be created. Previously created by Getalertnumber, Getincreasenumber, Getsetnumber will be rewritten and have a new closure. (in JavaScript, any time you can declare another function inside a function, the function is re-created when the outside function is called.)
*/
function BuildList (list) {
var result = [];
for (var i = 0; i<list.length; i + +) {
var item = ' Item ' + list[i];
Result.push (function () {alert (item + ' +list[i])});
}
return result;
}
function Testlist () {
var fnlist = BuildList ([1,2,3,4]);
for (var j=0; J < Fnlist.length; J + +) {
FNLIST[J] ();
}
}
Testlist ();//alert item1 undefined;
/*
Run the result, can explain function inside the function can only save local variable, cannot save parameter variable. So we're going to use the envelope function to be aware of the scope of the variables.
*/
function Calllocalvar () {
var sayalertname = function () {alert (name)};
var name = "Jacy";
return sayalertname;
}
Calllocalvar () ();//This write first executes the Calllocalvar and then executes the returned sayalertname;
/*
Note
The summary closure function can access variables defined at the same domain, either before or after the closure function. As long as the same domain can be accessed.
*/
function Checkclosure (Somenum, Someref) {
var num = somenum;
var arr = [n/a];
var ref = Someref;
return function (x) {
num + = x;
Arr.push (num);
Alert (' num: ' +num + ' \ n arr: ' +arr.tostring ()
+ ' \ n ref.somevar ' +ref.somevar);
}
}
var obj = {Somevar:4};
var fn1 = checkclosure (4,obj);
var fn2 = checkclosure (5,obj);
FN1 (1);//Num:5; arr:1,2,3,5; Ref.somevar:4;
FN2 (1);//Num:6; arr:1,2,3,6; Ref.somevar:4;
Obj.somevar + +;
FN1 (2);//Num:7; arr:1,2,3,5,7; Ref.somevar:5;
FN2 (2);//num:8; arr:1,2,3,6,8; Ref.somevar:5;
/*
Note
The wording here solves the problem that parameter variables cannot be saved, as long as you create a local scope variable to receive the value of the parameter variable.
Can explain the different scopes, do not affect each other.
*/
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Learn to summarize JavaScript closures