JS夯实基础系列之闭包

闭包

此篇为学习网络视频所做的笔记。
视频链接：Bilibili：JavaScript高级–30.闭包理解

何时产生闭包？

1. 一个函数内部嵌套一个函数；
2. 内部函数引用了外部函数的变量（或函数）；

function aa(){
    var a = 12;
    function bb(){
        console.log(a);
    }
}
aa();

到底什么是闭包?

错误理解：闭包是嵌套的内部函数。

正确理解：闭包是包含被引用的外部函数变量（或函数）的对象，这个对象是在内部函数之下。

也就是说：

1. 闭包是一个对象。
2. 闭包是嵌套函数下的一个对象。
3. 这个对象包含了嵌套函数所引用的外部函数的变量(或函数)。

常见的闭包

1.将内部函数作为外部函数的返回值

function fuc1(){
    var a = 2;
    function fuc2(){
        a++;
        console.log(a);
    }
    return fuc2;
}
var f = fuc1();
f(); //3
f(); //4

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

function showDelay(msg,time){
    setTimeout(function(){
        alert(msg);
    },time)
}
showDelay("这也产生一个闭包！",2000)

闭包的作用

1. 使函数执行完成后，函数内部的变量仍然存活于内存中（延长了局部变量的生命周期）；
2. 让函数外部可以（间接）操作（读写）函数内部的数据（变量或函数）；

闭包的生命周期

视频：JavaScript高级–33.闭包的生命周期

闭包的应用

编写自定义JS模块

function myModule(){
    var aa = "Ha a Ha";
    function fn1(){
        alert(aa.toUpperCase());
    }
    function fn2(){
        alert(aa.toLowerCase());
    }
    //暴露内部成员，返回一个对象
    return {
        fn1:fn1,
        fn2:fn2
    }
}

//调用
var md = myModule();
    md.fn1();
    md.fn2();

另一种JS模块写法(匿名函数自调用)

(function(){
    var aa = "Ha a Ha";
    function fn1(){
        alert(aa.toUpperCase());
    }
    function fn2(){
        alert(aa.toLowerCase());
    }
    //给window对象挂载一个对象myModule，暴露模块内部的函数方法
    window.myModule = {
        fn1:fn1,
        fn2:fn2
    }
})();

myModule.fn1()
myModule.fn2()

关于JS模块化，貌似也是一个比较复杂的新手问题，尤其是在现在这个阶段。希望出现官方、统一且易用的解决方案吧。