从新认识 JS 中的闭包

本文在我的站点同步：ethanlv.cn/article/19编程

我只是个知识的搬运工~markdown

浅约束与深约束

做用域肯定了程序里一个语句的引用环境，语言的做用域规则能够大体分为两类，静态做用域规则和动态做用域规则。现代的语言大可能是静态做用域的，固然也少有语言是绝对的静态做用域，这就和少有语言是存粹的面向对象式或少有语言是纯粹的解释式同样，语言的边界本就是模糊的。闭包

关于静态做用域和动态做用域我相信你们都很清楚了，很少作解释。编程语言

静态做用域规则 也称为词法做用域，是指引用环境依赖于能够出现名字声明的程序块的词法嵌套关系。函数
动态做用域规则 是指引用环境依赖于运行时遇到各类声明的顺序。oop

可是，上面的规则没有考虑到一个特殊的场景：在那些容许建立子程序引用，例如把 子程序看成参数传递的语言里，什么时候把做用域规则应用于这种子程序？是在建立这种引用时，仍是在子程序被调用时。ui

对于动态做用域来讲，这一问题就显得格外重要，固然静态做用域也是须要考虑到的。spa

要讲清楚这个问题，首先，让咱们来把 JS 看成一门动态做用域的语言。prototype

如今，咱们有个函数 isErCiYuan，它接收两个参数，第一个参数是人物特征，第二个参数是一个子程序参数，咱们指望它接收一个打印函数 print，print依据 comment 值的不一样而输出不一样的结果。天然的，咱们会在 isErCiYuan 这个函数中创建一个临时变量 comment 依据函数的第一个参数而为 comment 赋不一样的值。设计

// 固然这是段没法运行的代码
function print(){
    console.log(`我${comment}二次元`)
}
function isErCiYuan(characteristic,print){
    let {gender,hobby} = characteristic
    let comment = ''
    //1 -> boy，0-> girl
    if(gender === 1 && hobby === '喜欢穿女装'){
        comment = '是'
    }else{
        comment = '不是'
    }
    print()
}

复制代码

为了让上面的代码以咱们期待的方式正常工做，理所固然的咱们要在 print 函数被实际调用时再去创建变量 comment 的引用关系。

而这种让做为参数传递的子程序推迟创建引用环境约束的方式称为 浅约束，一般状况下，采用动态做用域规则的语言都将这种约束方式做为默认方式，与之对应的固然就是深约束了，即在子程序做为参数传递时就作好环境约束。一样拿上面那段代码来考虑，comment 此时就应该是空字符串了。

你没有猜错，静态做用域规则的语言采用的方式基本都是深约束。

等等，为何静态做用域还须要考虑这一问题，咱们知道，在静态做用域规则下，名字的意义原本就依赖于其词法嵌套关系/位置，而不是实际的执行流呀。

看下面这段代码：

function A(num,fn){
    function B(){
        console.log(num)
    }
    if(num > 0){
        fn()
    }else{
        A(1,B)
    }
}
function doNothing(){}
A(0,doNothing) 
复制代码

在上面这种状况下，咱们看到函数 A 递归执行了，这就致使 num 其实是存在多个实例的，那么最终输出的究竟是 0，仍是 1 呢。

若是是 0，那就是深约束，由于它在子程序 B 做为参数传递时就抓住了当前实例，这一行为没有被推迟，此时 Num 是 0。JS 中打印出来的的结果就是 0，你也能够本身试下。

如何实现深约束——闭包

要想实现深约束，就须要建立一种能显式地表达引用环境的东西。咱们通常将某个函数（通常是入口函数）以及这种相关联的引用环境（理解为一个符号表）称做闭包。闭包的特色是它捕获了自由变量（在函数外部定义但在函数内被引用）。这一行为能够用于解释咱们常说的 “闭包解决了父函数执行后上下文销毁致使子函数不能获取到父函数中变量的问题。”

如今，咱们给上面的代码加点东西，直观的看下闭包是什么：

function A(num,fn){
    function B(){
        console.log(num)
    }
    if(num > 0){
        fn()
    }else{
        A(1,B)
        console.log(B.prototype) //加在这了
    }
}
function doNothing(){}
A(0,doNothing) 
复制代码

B.prototype.constructor 下的 [[Scopes]] 中有一个 Closure(A)，里面保存着变量 num，其值为 0。

上面的这种闭包不太容易看出来，咱们来看个更广泛的例子。

function fn1(){
    let a = 0;
    function fn2(){
        let b = 1;
        return function fn3(){
            console.log(a,b)
        }
    }
    return fn2()
}
let fn4 = fn1()
复制代码

打印出 fn4 的 prototype 看看：

能够看到这里存在两个闭包，以由内到外的顺序排列，看到这，是否是做用域链的概念也更清晰了呢。

最后，彼得·兰丁（Peter Landin）在1964年将术语“闭包”定义为一种包含环境成分和控制成分的实体，而闭包的概念首次在1970年于 PAL 编程语言中彻底实现，用来支持词法做用域的头等函数，也就是前文所阐述的当子函数能做为参数传递时如何实现深约束的问题。咱们能够将闭包简单理解为捕获了特定自由变量的函数，借助闭包的特色，咱们能够实现私有变量的持久性和信息隐藏，这在不少状况下很是有用，闭包也所以而广为流传。

JS 中闭包的实现

function fn1(){
    let a = 0;
    function fn2(){
        let b = 1;
        return function fn3(){
            console.log(a,b)
        }
    }
    return fn2()
}
let fn4 = fn1()
复制代码

闭包的实如今思路上是比较简单的，以上面的代码为例， JS 引擎在预编译阶段经过对 fn2 内部函数的词法扫描，找出是否存在内部函数引用外部函数变量的状况，若是存在就打入对应的 Closure，最后放到 [[Scopes]] 中。要注意的是，这个过程是静态分析的，那 eval 怎么办呢。

function test(){
    const a = 1;
    const b = 2;
    return function(){
        const c = 3
        eval('console.log(a,c)')
    }
}
复制代码

对于上面这段代码

你会发现，eval 把变量都包进去了，即便是实际上并无使用的。这种降级策略也许就是 eval 执行效率低的缘由之一吧，而若是使用 new Function，由于其语法让咱们得以显式的指定变量名，天然就能够在静态分析时保证不打包多余变量到 Closure 中。

function test(){
    const a = 1;
    const b = 2;
    return function(){
        const c = 3
        new Function(a,'console.log(a,c)')
    }
}
复制代码

参考

zh.wikipedia.org/wiki/%E9%97…
《程序设计语言实践之路》第二版