学习笔记：JS高级——闭包是什么？简述：当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，就产生

是什么？

简述：
- 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，就产生了闭包。
是什么：
1. 理解一：闭包是嵌套的内部(子)函数
2. 理解二：闭包是嵌套的内部(子)函数中，包含了被引用变量(函数)的对象[Closure]
产生条件：
1. 函数嵌套
2. 内部函数引用了外部函数的数据(变量/函数)

function fn1() {
    var a = 1; // 被内部函数引用，产生闭包，该变量会存在于对象Closure中
    var b = 2; // 没有被内部函数引用
    function fn2() {
        console.log(a)
    }
}

fn1(); // 执行函数时，才开始产生闭包

常见的闭包

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

function fn1() {
    var a = 2;
    function fn2() {
        a++;
        console.log(a)
    }
    return fn2
}
var f = fn1() // 调用fn1函数时产生了闭包，并通过将内部函数赋值给变量f的方式，使闭包仍然存活在内存中
f() // 3
f() // 4
f = null; // 只有将f变量的引用释放时，第9行产生的闭包才会消失

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

function fn1(msg, time) {
    setTimeout(function () {
        alert(msg);
    }, time)
}

fn1('Hello World', 1000)

// 以上代码换一种易懂的写法
function fn1(msg, time) {
    
    function fn2() {
        alert(msg)
    }
    setTimeout(fn2, time)
}

fn1('Hello World', 1000)

闭包的作用

使用场景：

当不想让外部直接操作函数内部数据，又想让外部能通过特定的方式间接操作函数内部数据时，就可以使用闭包

使得函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
让函数外部可以间接操作（读写）到函数内部的数据（变量/函数）

问题：

函数执行完后，函数内部声明的局部变量是否还存在？一般情况是不存在了，只有存在于闭包中的变量才有可能存在
在函数外部能直接访问函数内部的局部变量吗？不能，但是可以通过闭包让外部间接访问和操作

闭包的生命周期

产生：在嵌套的内部函数定义执行完时就产生了
死亡：在嵌套的内部函数成为垃圾对象时才消失

function fn1() {
    // 产生：此时已经产生了（函数提升，内部函数对象已经创建了）
    var a = 2;
    function fn2() {
        a++;
        console.log(a)
    }
    return fn2
}
var f = fn1() // 调用fn1函数时产生了闭包，并通过将内部函数赋值给变量f的方式，使闭包仍然存活在内存中
f() // 3
f() // 4
f = null; // 死亡：包含闭包的函数对象成为垃圾对象

闭包的应用——自定义JS模块

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

// 方式一：
// ---------- myModule.js ----------
function myModule() {
    var msg = 'Hello World'
    
    function getMessage() {
        console.log('getMessage: ', msg)
        return msg
    }
    
    function setMessage(newMsg) {
        console.log('newMsg: ', newMsg)
        msg = newMsg
    }
    
    return {
        getMessage,
        setMessage,
    }
}

// ---------- myModule.html ----------\
<body>
  <script type="text/javascript" src="myModule.js"></script>
  <script type="text/javascript">
    var module = myModule()
    module.getMessage() // getMessage:  Hello World
    module.setMessage('Hello JS Module') // newMsg:  Hello JS Module
    module.getMessage() // getMessage:  Hello JS Module
  </script>
</body>

// 方式二：
// ---------- myModule2.js ----------
(function(window) { // 避免代码压缩导致找不到window
    var msg = 'Hello World'
    
    function getMessage() {
        console.log('getMessage: ', msg)
        return msg
    }
    
    function setMessage(newMsg) {
        console.log('newMsg: ', newMsg)
        msg = newMsg
    }
    
    window.myModule2 = { // 代码压缩可能会将此处的winow压缩为a、b、c这种简短的字母，导致找不到window
        getMessage,
        setMessage,
    }
})(window) // 避免代码压缩导致找不到window

// ---------- myModule.html ----------\
<body>
  <script type="text/javascript" src="myModule2.js"></script>
  <script type="text/javascript">
    myModule2.getMessage() // getMessage:  Hello World
    myModule2.setMessage('Hello JS Module') // newMsg:  Hello JS Module
    myModule2.getMessage() // getMessage:  Hello JS Module
  </script>
</body>

闭包的缺点

缺点：

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

解决：

非必要时不用
及时释放