Learn to summarize JavaScript closures

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.