JavaScript | 闭包

————————————————————————————————————————————

JavaScript闭包

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

作用域链：只有内层函数可以调用外层变量，形成一条单向的作用域链

词法作用域：不同的函数之间不共享词法作用域,可以通过闭包来实现共享

作用域链与词法作用域样例

// 作用域链
var a = 1;

function test() {
    var b = 2;

    function test1() {
        // 在test1()中可以调用外层的变量a和b
        // 但是在外层无法调用内层的变量,形成了一条作用域链
        var c = 3;
        console.log(a);
        console.log(b);
        return b;
    }
    test1();
}
test();

// 词法作用域
// 不同的函数之间不共享词法作用域,可以通过闭包来实现共享
// 在这种写法中,错误信息提示d未定义
// function f1() {
//     var d = 333;
//     return f2();
// }

// function f2() {
//     return d;
// }
// console.log(f1());

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

闭包：

• 在正常情况下，只有function2可以访问function1中的变量var a 和var b
• 如果想要在全局作用域中访问内层变量，就需要用到"闭包"
• 即借function2来调用function1中的变量

优点：

• 可以突破全局作用域链，调用函数内部变量
• 退出后函数不会被销毁，而是保留在内存中
• 作为迭代器来使用

缺点：

• 闭包会使函数中的变量都保存在内存中，内存消耗很大，不能滥用闭包。在IE中可能导致内存泄漏。在退出函数之前，尽量将不使用的局部变量全部删除
• 闭包会在父函数外部，改变父函数内部变量的值。所以如果把父函数作为对象Object使用，把闭包当作公用方法Public Method，把内部变量作为它的私有属性Private Value，此时注意不要随便改变父函数内部变量的值

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

实现形式：

• Demo1：通过返回函数的函数形式来返回f1中的变量

• Demo2：利用全局变量进入到函数内部来调用

闭包的基础形式

// 通过闭包突破全局作用域链

// Demo1:使用返回函数的函数来实现闭包
function f1() {
    var a = 'aaa';
    return function() {
        return a;
    }
}
var a1 = f1();
// f1()返回的是function(){return a;}
console.log(typeof a1);
// 要打印a的值则要用a1()
console.log(a1());
// 或使用二次调用
var a2 = f1()();
console.log(a2);

// Demo2:利用全局变量进入到函数内部来调用
var temp;
function f3(){
    var b = 'bbb';
    temp = function(){
        return b;
    }
}
// 先调用f3(),将function()赋给全局变量temp
f3();
// 执行temp()得到变量b的内容
console.log(temp());

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

闭包的应用：基本形式/迭代器

// 闭包的应用
// Demo1:基本应用
function f1() {
    var n = 1;
    // test是全局变量
    test = function() {
        n++;
    }

    function f2() {
        console.log(n);
        return 'f2 return';
    }
    // 调用f1时返回f2()的指针
    return f2;
}
// res调用f1()时,返回f2给res
var res = f1();
// 打印res可以看到f2()的内容
console.log(res);
// 执行f2的内容可以得到n与f2()的返回值
console.log(res());
// 执行test()函数后n++
test();
// 此时调用n的值即为2
console.log(res());
// 说明变量n始终保存在内存中,并不会因为f1()执行结束而销毁
// f1是f2()的复函数,f2又被赋予给全局变量res,f2又依赖f1,所以f1未被销毁

// *******************************************************************
// Demo2:设置变量访问控制,在外部不会被访问到
// 全局作用域中变量getValue和setValue用于调用
var setValue, getValue;
// 设置自调用函数,建立初始值
(function() {
    var num = 0;
    getValue = function() {
        return num;
    };
    setValue = function(x) {
        num = x;
    };
})();
// 默认得到初始值0
var getNum = getValue();
console.log(getNum);
// 给num赋值
setValue(10);
// 获取获取到的值
var getNum = getValue();
console.log(getNum);

// *******************************************************************
// Demo3:迭代器效果
// 对数组操作,每次调用则返回下一个元素
var arr1 = ['a', 'b', 'c', 'd', 'e'];

function iterator(arr) {
    var i = 0;
    return function() {
        return arr[i++];
    };
}
var next = iterator(arr1);
console.log(next());
console.log(next());
console.log(next());
console.log(next());
console.log(next());

// *******************************************************************
// 迭代器的第二种形式
function iterator2() {
    var arr2 = [];
    var i;
    // 每次循环时自调用function(x),返回function(){return x};
    for (i = 0; i < 3; i++) {
        arr2[i] = (function(x) {
            return function() {
                return x;
            };
        })(i);
    }
    return arr2;
}
// 在这里next2是一个数组,数组的内容是function(){return x;};
var next2 = iterator2();
console.log(next2);
// next2[0]执行return x;
console.log(next2[0]());
console.log(next2[1]());
console.log(next2[2]());

// *******************************************************************
// 迭代器的第三种形式
function iterator3() {
    // 闭包函数
    function test3(x) {
        return function() {
            return x * 10;
        }
    }
    var arr3 = [];
    var i;
    for (i = 0; i < 3; i++) {
        // 每次循环时调用闭包函数赋给a[i];
        arr3[i] = test3(i);
    }
    return arr3;
}
var next3 = iterator3();
console.log(next3);
console.log(next3[0]());
console.log(next3[1]());
console.log(next3[2]());