1. Global variables and local variables
Before learning closures, you need to understand the difference between global variables and local variables.
Give a chestnut:
[This a is a local variable]
Local variables can only be used to define other functions. It is not available for other functions or script codes.
function myFunction() {
var a = 4;
return a * a;
}
[This a is a global variable]
Global variables in web pages belong to the window object. Global variables can be applied to all scripts on the page.
var a = 4;
function myFunction() {
return a * a;
}
Even if the names of global and local variables are the same, they are two different variables. Modifying one of them will not affect the value of the other.
If the var keyword is not used when a variable is declared, then it is a global variable, even if it is defined within a function.
2. The life cycle of variables
The scope of global variables is global, that is, global variables are everywhere in the entire js program.
A local variable is a variable declared inside a function, it only works inside the function, and the scope is local.
The parameters of the function are also local and only work inside the function.
3. Closure
Closure function-a function declared in a function
Closure: an internal function can always access the parameters and variables declared in the internal function in which it is located
Closure is a mechanism to protect private variables, forming a private scope when the function is executed, and protecting the private variables inside from outside interference. Intuitively, it forms a stack environment that is not destroyed.
function funA(){
var a=10;
return function(){
alert(a);}
}
funA()();//调用函数
Closures will cause memory leaks:
key=value, the key is deleted, but the value is still in memory
4. A few chestnuts
1.i is a global variable, the value of i will be stored every time the function is called, and the value of i when the function is called next time is the value after the last call.
var i = 0;
function outerFn(){
function innnerFn(){
i++;
console.log(i);
}
return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();//1
inner2();//2
inner1();//3
inner2();//4
2.i is defined inside the outerFn() function, i will be reassigned to 0 each time it is called, so the values of inner1 and inner2 are both 1, and the innerFn() function is called again for the second time. The result is Will add 1 to the first call
function outerFn(){
var i = 0;
function innnerFn(){
i++;
console.log(i);
}
return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();//1
inner2();//1
inner1();//2
inner2();//2
3. Break it down:
The result of
calling add(1) is 1 The result of calling add(1)(2) is 3 The result of
calling add(1)(2)(3) is 6
var add = function(x) {
var sum = 1;
var tmp = function(x) {
sum = sum + x;
return tmp;
}
tmp.toString = function() {
return sum;
}
return tmp;
}
alert(add(1)(2)(3)); //6