关于javascript:闭包什么是闭包JavaScript前端

闭包的背景

因为 js 中只有两种作用域，全局作用域和函数作用域，而在开发场景下，将变量裸露在全局作用域下的时候，是一件十分危险的事件，特地是在团队协同开发的时候，变量的值会被无心篡改，并且极难调试剖析。这样的状况下，闭包将变量封装在部分的函数作用域中，是一种十分适合的做法，这样躲避掉了被其余代码烦扰的状况。

闭包的应用

上面是一种最简略间接的闭包示例

// 妈妈本体
function mother(){
    // 口袋里的总钱数
    let money = 100
    // 消费行为
    return function (pay){
        // 返回残余钱数
        return money - pay
    }
}
// 为儿子生产
let payForSon = mother()
// 打印最初的残余钱数
console.log(payForSon(5))

为了便于了解，咱们将内部函数比喻为妈妈本体，外面保留着总钱数这个变量和生产这个行为，通过创立为儿子生产的这个行为对象，而后执行这个行为破费 5 元，返回残余的 95 元。

这个就是为了将变量 money 保留在 mother 本体内而防止裸露在内部的全局环境作用域中，只能通过 mother() 创立消费行为来影响 money 这个变量。

由此能够演绎总结应用闭包的三个步骤

1. 用外层函数包裹变量，函数；
2. 外层函数返回内层函数；
3. 内部用变量保留内部函数返回的内层函数

目标是为了造成一个专属的变量，只在专属的作用域中操作。

上述的闭包代码示例中，有一个缺点的场景是，在后续不须要 money 变量的状况下，没有开释该变量，造成内存泄露。起因是 payForSon 这个函数的作用域链援用着 money 对象，解决的方法是将 payForSon = null 就能够开释办法作用域，进而解除对 money 的援用，最初开释 money 变量。

闭包的扩大

函数柯里化

在开发的场景中，有时须要通过闭包来实现函数的柯里化调用。调用示例如下

alert(add(1)(2)(3))

这种间断的传参调用函数，叫做函数柯里化。

通过闭包的实现形式如下

function add(a){
    // 保留第一个参数
    let sum = a
    function tmp(b){
        // 从第二个函数开始递减
        sum = sum + b
        // 返回 tmp，让后续能够持续传参执行
        return tmp
    }
    tmp.toString = function(){return sum}
    // 返回加法函数
    return tmp
}
alert(add(1)(2)(3))

上面咱们来一步步剖析，

1. add(1) 执行时，保留第一个参数到 sum 变量中，返回 tmp 函数
2. add(1)(2) 执行等于 tmp(2), 将 2 的值加到了变量 sum 上，返回 tmp 函数自身
3. add(1)(2)(3) 执行等同于上述步骤的加到比变量 sum 上，返回 tmp 函数自身

4. alert(add(1)(2)(3)) 执行时，alert 须要将值转为 string 显示，最初的 tmp 函数执行 tmp.toString，返回 sum 的值。

   矩阵点击利用

   该例子的 demo 代码在我的 github 上，能够自行取阅

需要：在一个 4 * 4 的矩阵方块中，实现点击每个按钮时记录下各自的点击次数，相互之间互不烦扰。

思路：在按钮事件中应用闭包，创立独立的存储变量空间。

留神：下列的计划 1 到计划 3 是逐次演进的优化计划，须要依照计划标号的秩序逐层了解，更有利于了解最终的优化计划

计划 1

<div id="container"></div>
...
let container = document.getElementById('container')
for (let r = 0; r < arr.length; r++) {for (let c = 0; c < arr[r].length; c++) {let cell = document.createElement('div')
        cell.innerHTML = `(${r},${c})`
        container.append(cell)
        cell.onclick = (function () {
            let n = 0
            return function () {
                n++
                cell.innerHTML = ` 点 ${n}`
            }
        })()}
}

在每个按钮上通过 onclick 绑定闭包办法，存储操作独立的 n 变量，这样就能够独自记录每个按钮的点击次数

毛病：这样做有一个有余的中央是，内部无奈获取外部的 n 变量，不能实现与内部的交互，比方按钮间的相互影响。

计划 2

为了改善计划 1 的毛病，咱们引入内部数据 arr 来操作管控按钮点击数。
代码示例如下：

let arr = [[0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
        ]
let container = document.getElementById('container')
for (let r = 0; r < arr.length; r++) {for (let c = 0; c < arr[r].length; c++) {let cell = document.createElement('div')
        cell.innerHTML = `(${r},${c})`
        container.append(cell)
        cell.onclick = (function (r, c) {return function () {arr[r]++
                cell.innerHTML = ` 点 ${arr[r]}`
            }
        })(r, c)
    }
}

参照计划 1，改变点蕴含两个

• 新增 arr 二维数组来记录点击数，这样能够达到与内部交互的目标
• onclick 绑定的事件新增 r，c 两个参数，并且执行时传参进入，这样就能够把行列参数传递到办法外部（onclick 的执行环境作用域与 r,c 所在的环境不统一，所以无奈间接应用）

这样改良完当前，内部能够通过操作 arr 来与每个按钮的点击次数进行交互。

毛病：这样会将 arr 裸露在全局作用域下（能够在 console 控制台拜访到），很容易被其他人或者模块误操作，也不利于封装

计划 3

基于计划 2 的改良实现为，用一个立刻执行的函数包裹住整个执行代码，这样就构建了一个函数作用域来封装 arr 变量为公有。代码如下：

(function () {
        let arr = [[0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
        ]
        let container = document.getElementById('container')
        for (let r = 0; r < arr.length; r++) {for (let c = 0; c < arr[r].length; c++) {let cell = document.createElement('div')
                cell.innerHTML = `(${r},${c})`
                container.append(cell)
                cell.onclick = (function (r, c) {return function () {arr[r]++
                        cell.innerHTML = ` 点 ${arr[r]}`
                    }
                })(r, c)
            }
        }
    })()

这样一个绝对残缺的按钮点击次数的计划就实现了。

应用 call 实现 bind

这个须要有 call 和 bind 的应用常识的前提，能够自行百度哈

废话不多说，间接上代码

Function.prototype.bind = function(obj){console.log('调用自定义 bind 函数');
    // 保留以后函数对象
    let fun = this
    // 去除第一个 obj 参数，并且转换为 js 数组
    let outerArg = Array.prototype.slice.call(arguments,1)
    return function(){
        // 将 arguments 转为 js 数组
        let innerArg = Array.prototype.slice.call(arguments)
        // 汇总所有参数
        let totalArg = outerArg.concat(innerArg)
        // 调用内部保留的函数，并且传参
        fun.call(obj,...totalArg)
    }
}

// 调用示例
let zhangsan = {name:'wawawa'}
function total(s1,s2){console.log(this.name + s1 + s2);
}
let bindTotal = total.bind(zhangsan,100)
bindTotal(200)

重写函数类的 bind 函数，

1. 先将函数对象（也就是上面示例中的 total 函数）保留在 fun 变量中，等于闭包外层保留了 fun，obj 以及其余绑定的参数（因为 arguments 是类数组对象，须要转换为数组，且去除第一个函数 obj）；
2. 而后返回匿名函数，在匿名函数中，将内部和外部的参数进行转换和拼接；
3. 最初通过 fun.call(obj,…totalArg)，调用保留的函数对象 fun，并且通过 call 来实现传递绑定的作用域 obj，和其余参数 totalArg

留神：

• arguments 是类数组对象，不能间接应用数组办法，须要转化为数组操作
• 外层函数 arguments 转化时，须要剔除掉 obj，因为上面的 fun.call 须要独自传递 obj 作为函数作用域
• totalArg 传递给 call 函数时，须要通过 … 语法糖摊开数组

本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。