闭包

定义

闭包是在写函数时,多个函数嵌套的一种现象。
当内部函数被返回到外部并保存时,一定会产生闭包,闭包会产生原来的作用域链不释放,过渡的闭包可能会导致内存泄漏,或加载过慢。

示例分析

function test1() {
    function test2() {
        var b = 2;
        console.log(a); //1
    }

    var a = 1;
    return test2();
}

var c = 3;
var test3 = test1();
test3;

图解分析

(1)

(2)

(3)

(4)

(5)

闭包作用

  • 实现公有变量
  • 可以做缓存(存储结构)
  • 可以实现封装,属性私有化
  • 模块化开发,防止污染全局变量

闭包示例

(1)数组实现累加,累减

// 实现公有变量
function test() {
    var n = 100;
    function add() {
        n++;
        console.log(n);
    }
    // add defined    add.[[scope]]    0: testAO
    //                                                1: GO
    function reduce() {
        n--;
        console.log(n);
    }
    // reduce defined    reduce.[[scope]]    0: testAO
    //                                                            1: GO
    // 数组返回
    return [add, reduce];
}

var arr = test();
arr[0](); // 101
// add doing    add.[[scope]]    0: addAO
//                                                1: testAO    *
//                                                2: GO
arr[1](); // 100 
// reduce doing    reduce.[[scope]]    0: reduceAO
//                                                        1: testAO    *与add中的testAO一样
//                                                        2: GO

(2)面包管理器

// 实现公有变量
function breadMgr(num) {
    // var breadNum = num || 10;
    var breadNum = arguments[0] || 10;

    function supply() {
        breadNum += 10;
        console.log(breadNum);
    }

    function sale() {
        breadNum--;
        console.log(breadNum);
    }

    // 闭包:数组返回
    return [supply, sale];
}

var breadMgr = breadMgr(50);
breadMgr[0](); // 60
breadMgr[1](); // 59

(3)对象实现闭包-星期天计划时间

// 可以做缓存(存储结构)
function sunSched() {
    var sunSched = '';
    var operation = {
        setSched: function(thing) {
            sunSched = thing;
        },
        showSched: function() {
            console.log('My Schedule on sunday is ' + sunSched);
        }
    }
    // 对象实现闭包
    return operation;
}

var sunSched = sunSched();
sunSched.setSched('studying');
sunSched.showSched();  // My Schedule on sunday is studying
sunSched.setSched('working');
sunSched.showSched(); // My Schedule on sunday is working