闭包理解

如何产生闭包

• 当一个嵌套的内部（子）函数引用了嵌套外部（父）函数的变量（函数）时--就产生了闭包

闭包是什么

• 使用chrome调试查看

• 理解一 -- 闭包是嵌套的内部函数

• 理解二 -- 闭包是包含被引用变量（函数）的对象

• 闭包存在于嵌套的内部函数中

• 产生闭包的条件

• 函数嵌套

• 内部函数引用了外部函数的数据（变量或函数）

<script>
    function fn1() {
        var a = 3;
        function fn2() {
            console.log(a);
        }
        fn2();
    }
    fn1();
</script>

常见闭包

将函数作为另一个函数的返回值

function fn1() {
    var a = 2;
    function fn2() {
        a++;
        console.log(a);
    }
    return fn2;
}
var f = fn1();
f();    //3--fn1的返回值是fn2--相当于调用了fn2()--相当于fn1()()
f();    //4--闭包不会消失--第一次fn1()执行时--闭包内的数据是3--第二次执行时就是4

将函数作为实参传递给另一个函数调用

function showDelay(msg, time) {
    setTimeout(function () {
        console.log(msg);   //闭包
    }, time);
}
showDelay('zao', 2000);

闭包的作用

• 使用函数内部的变量在函数执行完后--仍然存活在内存中--延长了局部变量的生命周期

• 让函数外部可以操作（读写）到函数内部的数据--变量/函数

问题

• 函数执行完--函数内部声明的局部变量是否还存在--一般不存在，存在于闭包中的变量才可能存在
• 在函数外部能直接访问函数内部的局部变量吗--不能，但可以通过闭包让外部操作它

闭包的生命周期

• 产生--在嵌套内部函数定义执行完时就产生了
• 死亡--在嵌套内部函数成为垃圾对象时

function fn1(){
    // 闭包产生--函数提升--内部函数已经创建了
    var a = 2;
    function fn2(){
        a++;
        console.log(a);
    }
    return fn2;
}
//只要有变量引用fn1()闭包就一直存在
var f = fn1();
f();
f();
//闭包死亡--包含闭包的函数成为垃圾对象
f = null;

闭包的应用

定义JS模块

• 具有特定功能的js文件
• 将所有数据和功能都封装在一个函数内部--私有
• 只向外暴露一个包含n个方法的对象或函数
• 模块的使用者--只需通过模块暴露的对象调用方法来实现对应的功能

//JS文件
function myMoudle() {
    var msg = 'zaoya';
    function doSomething() {
        //toUpperCase--字符串转换为大写
        console.log('doSomething()' + msg.toUpperCase());
    }
    function doOtherthing() {
        //toLowerCase--字符串转换为小写
        console.log('doOtherthing()' + msg.toLowerCase());
    }
    //向外暴露对象
    return {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
}

//html文件
<script src="myMoudle.js"></script>
<script>
    let fn = myMoudle();
	fn.doSomething();
	fn.doOtherthing();
</script>

//JS文件
(function myMoudle1() {
    let msg = 'zaozao';
    function doSomething() {
        console.log('doSomething()' + msg.toUpperCase);
    };
    function doOtherthing() {
        console.log('doOtherthing()' + msg.toLowerCase);
    }
    window.myMoudle1 = {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
})()

//html文件
<script src="myMoudle1.js"></script>
<script>
	myMoudle1.doSomething();
	myMoudle1.doOtherthing();
</script>

闭包的缺点

缺点

• 函数执行完后--函数内的局部变量没有释放--占用内存时间会变长
• 容易造成内存泄漏

解决

• 能不用闭包就不用闭包
• 及时释放

内存溢出

• 一种程序运行出现的错误
• 当程序运行需要的内存超过了剩余的内存时--就会抛出内存溢出的错误

内存泄漏

• 占用的内存没有及时释放
• 内存泄漏积累多了就容易导致内存溢出

常见内存泄漏

• 意外的全局变量
• 没有及时清理的计时器或回调函数
• 闭包

面试题

var name = 'The Window';
var object = {
    name: 'My Object',
    getNameFunc: function () {
        return function () {
            return this.name;
        }
    }
}
//object.getNameFunc()--是对象调用--通过object调用--this为object
//通过object.getNameFunc()--调用函数--object.getNameFunc()()--是函数调用--this为window
alert(object.getNameFunc()());  //The Window
var name2 = 'The Window';
var object = {
    name2: 'My Object',
           var that = this;
        return function () {
            return that.name2;
        }
    }
}
//object.getNameFunc()--是对象调用--通过object调用--this为object
//object.getNameFunc()()--中that是object.getNameFunc()的this--指向object
alert(object.getNameFunc()())       //My Object