Example 1
function sayHello(name)
{
var text = 'Hello ' + name;
var sayAlert = function() { (text); }
sayAlert();
}
sayHello("Bob") // Output "Hello Bob"
The sayAlert() function is defined and called in the sayHello() function; as the inner layer function, you can access the text variable in the outer layer function saysHello().
Example 2
function sayHello2(name)
{
var text = 'Hello ' + name; // Local variables var sayAlert = function() { (text); }
return sayAlert;
}
var say2 = sayHello2("Jane");
say2(); // Output "Hello Jane"
Example 3
function buildList(list) {
var result = [];
for(var i = 0; i < ; i++) {
var item = 'item' + list[i];
(
function() {
(item + ' ' + list[i]);
}
);
}
return result;
}
var fnlist = buildList([1,2,3]);
for (var j = 0; j < ; j++) {
fnlist[j]();
}
The result is: 3 "item3 undefined" outputs in succession
Analysis:By executing the buildList function, a result is returned, and this result stores 3 anonymous functions. However, these three anonymous functions are actually three closures, because they can access local variables of the parent function. So the reserved i in the closure is the final value of 3. So list[3] must be undefined. The item variable value is item3.
Change it to the following code:
function buildList(list) {
var result = [];
for(var i = 0; i < ; i++) {
var item = 'item' + list[i];
(
(function(i) {
(item + ' ' + list[i]);
})(i)
);
}
return result;
}
var fnlist = buildList([1,2,3]);
Results obtained:
item1 1 item2 2 item3 3
Explanation: Although an array is passed in here, three self-executed functions are returned.
Example 4
function newClosure(someNum, someRef)
{
var anArray = [1,2,3];
var num = someNum;
var ref = someRef;
return function(x)
{
num += x;
(num);
('num: ' + num + "; " + 'anArray ' + () + "; " + ' ' + );
}
}
closure1 = newClosure(40, {someVar: "closure 1"});
closure2 = newClosure(1000, {someVar: "closure 2"});
closure1(5); // Print "num: 45; anArray 1,2,3,45; closure 1"closure2(-10); // Print"num: 990; anArray 1,2,3,990; closure 2"
Each call to newClosure() creates independent closures, and their local variable num and ref are not the same value.
Example 5
function sayAlice()
{
var sayAlert = function() { (alice); }
var alice = 'Hello Alice';
return sayAlert;
}
var sayAlice2 = sayAlice();
sayAlice2(); // Output "Hello Alice"
The alice variable is defined after the sayAlert function, which does not affect code execution. Because the closure pointed to by the return function saysAlice2 will contain all local variables in the sayAlice() function, which naturally includes the alice variable, so "Hello Alice" can be printed normally.
Example 6
function setupSomeGlobals() {
var num = 666;
gAlertNumber = function() { (num); }
gIncreaseNumber = function() { num++; }
gSetNumber = function(x) { num = x; }
}
setupSomeGlobals();
gAlertNumber(); // Output 666gIncreaseNumber();
gAlertNumber(); // Output 667gSetNumber(5);
gAlertNumber(); // Output5
explain:First of all, gAlertNumber, gIncreaseNumber, and gSetNumber are three global variables, and their three values are anonymous functions, but these three anonymous functions themselves are closures. The nums they operate are the same nums stored in memory, and all of them will get the above results.
The above article thoroughly understands js closure through examples is all the content I share with you. I hope you can give you a reference and I hope you can support me more.