📒【闭包】理解JavaScript闭包及其应用

什么是闭包？

闭包是指那些能够访问自由变量的函数。
自由变量：指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。
闭包 = 函数 + 函数能够访问的自由变量

ECMAScript中，闭包指的是：

从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。
从实践角度：以下函数才算是闭包：

即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
在代码中引用了自由变量

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope();
foo(); //"local scope"

进入全局代码，创建全局执行上下文，全局执行上下文压入执行上下文栈
全局执行上下文初始化
执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 执行上下文被压入执行上下文栈
checkscope 执行上下文初始化，创建变量对象、作用域链、this等
checkscope 函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出
执行 f 函数，创建 f 函数执行上下文，f 执行上下文被压入执行上下文栈
f 执行上下文初始化，创建变量对象、作用域链、this等
f 函数执行完毕，f 函数上下文从执行上下文栈中弹出

Q：当 f 函数执行的时候，checkscope 函数上下文已经被销毁了啊(即从执行上下文栈中被弹出)，怎么还会读取到 checkscope 作用域下的 scope 值呢？
A： f 执行上下文维护了一个作用域链：

fContext = {
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
}

就是因为这个作用域链，f 函数依然可以读取到 checkscopeContext.AO 的值，说明当 f 函数引用了 checkscopeContext.AO 中的值的时候，即使 checkscopeContext 被销毁了，但是 JavaScript 依然会让 checkscopeContext.AO 活在内存中，f 函数依然可以通过 f 函数的作用域链找到它，正是因为 JavaScript 做到了这一点，从而实现了闭包这个概念。

Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，子可以访问父作用域的变量，但是父无法访问子作用域中的变量。

　　function f1(){
　　　　var n=999;
　　}
　　alert(n); // error

Q：如何从外部读取内部变量？

在函数内部创建一个函数f2，并返回f2

function f1() {
  var n = 999;

  function f2() {
    console.log(n);
  }

  return f2;
}

let result = f1();
result(); // 999

如上f2函数就是一个闭包。闭包就是可以读取其他函数内部变量的函数，也可以理解是定义在一个函数内部的函数。闭包是将函数内部作用域和函数外部连接起来的一座桥梁。

闭包的作用

读取函数内部的变量
让这些变量始终保持在内存中

function f1() {
  var n = 999;
  nAdd = function () {
    n += 1
  }
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000

result实际是闭包f2函数，两次运行值不一样，说明函数f1的局部变量n一直保存在内存中，并没有再f1调用后被自动清除。
原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
nAdd=function(){n+=1}没有var关键字，所以nAdd是全局变量，其值是一个匿名函数，而这个匿名函数本身是一个闭包，所以可以再函数外部对函数内部的局部变量进行操作。
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

闭包的特点

闭包外层是一个函数(闭包是定义在函数内部的函数)
闭包内部都有函数
闭包会返回内部函数(因为闭包的目地是外部要访问内部变量)
闭包返回的函数内部不能有return this... 因为这是this已经改变

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

执行闭包后，闭包内部变量会存在，而闭包内部函数的内部变量不存在。

闭包的应用

模拟私有变量的实现

仅在对象内部生效，无法从外部触及，这样的变量，就是私有变量。

// 利用闭包生成IIFE，返回 User 类
const User = (function() {
    // 定义私有变量_password
    let _password

    class User {
        constructor (username, password) {
            // 初始化私有变量_password
            _password = password
            this.username = username
        }

       login() {
           // 这里我们增加一行 console，为了验证 login 里仍可以顺利拿到密码
           console.log(this.username, _password)
           // 使用 fetch 进行登录请求，同上，此处省略
       }
    }

    return User
})()

let user = new User('xiuyan', 'xiuyan123')

console.log(user.username) // xiuyan
console.log(user.password) // undefined
console.log(user._password) // undefined
user.login() // xiuyan xiuyan123

我们把 _password 放在了 login 方法的外层函数作用域里，并通过立即执行 User 这个函数，创造出了一个闭包的作用域环境。我们看到不管是 password，还是 _password，都被好好地保护在了 User 这个立即执行函数的内部。
看到User对外暴露的属性确实已经没有 password，通过闭包，我们成功达到了用自由变量来模拟私有变量的效果！

偏函数和柯里化

柯里化：把接受 n 个参数的 1 个函数改造为只接受 1个参数的 n 个互相嵌套的函数的过程。也就是 fn (a, b, c)fn(a,b,c) 会变成 fn (a)(b)(c)fn(a)(b)(c)。
偏函数：固定你函数的某一个或几个参数，然后返回一个新的函数（这个函数用于接收剩下的参数）。

function generateName(prefix) {
    return function(type, itemName) {
        return prefix + type + itemName
    }
}
// 把3个参数分两部分传入
var itemFullName = generateName('大卖网')('母婴', '奶瓶')

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

思考题

var test = (function() {
    var num = 0
    return () => {
        return num++
    }
}())
for (var i = 0; i < 10; i++) {
    test()
}
console.log(test())

function test (){
    var num = []
    var i
    for (i = 0; i < 10; i++) {
        num[i] = function () {
            console.log(i)
        }
    }

    return num[9]
}
test()()

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (i) {
        return function(){
            console.log(i);
        }
  })(i);
}

data[0]();
data[1]();
data[2]();