四个例子理解闭包
/**
* 闭包原理
* @date 2017-04-10 14:04:17
* @version 1
*/
//理解作用域、作用域链
//内部作用域可以通过作用域链引用外部作用域的变量
// function(){}() functionName() 立即执行函数
//例一
function exp1() {
var a = 1;
var b = function() {
//console.log(0);
//exp1函数被调用的时候,0不会输出;b函数被调用时,0才输出。
console.log(a);
};
//b是函数,被调用的时候输出才执行,通过作用域链找到a值。
a = a + 3;
return b;
}
var res1 = exp1(); //[function]
res1();
//调用函数执行输出,a值已经被修改为4
console.log('------------------------');
//本质:exp1函数已执行完,
b函数才被调用
。
//例二
function exp2() {
var a = 1;
var b = function() {
console.log(a);
}(); //b是数值,匿名函数立即执行输出a值为1
a = a + 3;
return b;
}
var res2 = exp2(); //1
console.log('------------------------');
//例三
function exp3() {
var a = 1;
var b = function() {
return function(){
console.log(a);
};
}();
//再加一层闭包保持b是函数。外层匿名函数立即执行返回函数,b是函数,被调用的时候输出才执行,通过作用域链找到a值。
a = a + 3;
return b;
}
var res3 = exp3(); //[function]
res3();//调用函数执行输出,a值已经被修改为4
console.log('------------------------');
//例四
function exp4() {
var a = 1;
var b = function(num) {//参数num被赋值为1
return function(){
console.log(num);
};
}(a);//再加一层闭包保持b是函数,外层匿名函数传参立即执行。立即执行外层匿名函数返回函数,b是函数,被调用的时候输出才执行,通过作用域链找到num值。
a = a + 3;
return b;
}
var res4 = exp4(); //[function]
res4();//调用函数执行输出,num值为1
console.log('------------------------');
//拓展
function exp5() {
var b = [];
for (var i = 0; i < 4; i++) {
b[i] = function() {
console.log(i);
};
}
return b;
}
var res5 = exp5();
//[[function],[function],[function],[function]]
res5[1](); //4
console.log('------------------------');
function exp6() {
var b = [];
for (var i = 0; i < 4; i++) {
b[i] = function(num) {
return function(){
console.log(num);
};
}(i);
}
return b;
}
var res6 = exp6();
//[[function],[function],[function],[function]]
res6[1](); //1