#hello，JS：14闭包（词法作用域）

作者: 饥人谷_远方 | 来源:发表于2018-08-14 18:02 被阅读41次

前言：

看过一些相关文章，知道想理解闭包，词法作用域和作用域（链）是非常重要的前置知识，结合之前所学，可以继续学习词法作用域和闭包。
想告诉一些前端萌新们：记录的知识都是在我理解的基础上记录下来的，也希望大家是理解的情况下去学习哦~（注意看我加粗的语句）

可以回顾一下之前的作用域和作用域链：

#hello，JS：04作用域和作用域链

简单说一下作用域（链）的变量（标识符）如何找？

函数在执行的过程中，先从自己内部找声明过的变量
如果找不到，再从创建当前函数所在的作用域(词法作用域)去找, 以此往上（注：如果找不到则为undefined或报错）
注意找的是变量的当前的状态

参考资料：
lce_shou《深入理解闭包之前置知识→作用域与词法作用域》

前置知识：

一、了解词法作用域前，补充作用域下标识符的查找规则

看完了作用域和作用域链知识，我们有必要了解一下JS编译过程：
JavaScript是有编译过程的。先从这段简单的代码开始：var name = 'iceman'，它的编译过程其实有两个动作：

编译器在当前作用域中声明一个变量name
运行时引擎在作用域中查找该变量，找到了name变量并为其赋值

证明以上的说法：

console.log(name); // 输出undefined
var name = 'iceman';

在var name = 'iceman'的上一行输出name变量，并没有报错，输出undefined，说明输出的时候该变量已经存在了，只是没有赋值而已。

其实编译器是这样工作的，在代码执行之前从上到下的进行编译，当遇到某个用var声明的变量的时候，先检查在当前作用域下是否存在了该变量。如果存在，则忽略这个声明；如果不存在，则在当前作用域中声明该变量。

上面的这段简单的代码包含两种查找类型：

输出变量的值时查找类型是：RHS，即变量出现在右侧时进行RHS查询。（作用域中查找变量都是RHS）。RHS就是取到它的源值。
找到变量为其赋值的查找类型是：LHS，即变量出现在赋值操作的左侧时进行LHS查询。（所有的赋值操作中查找变量都是LHS）
注：“赋值操作的左侧和右侧”，并不意味着只是“=”，实际上赋值操作还有好几种形式。

作用域中查找变量都是RHS。查找规则是从当前作用域开始找，如果没找到再到父级作用域中找，一层层往外找，如果在全局作用域如果还没找到的话，就会报错了：ReferenceError: 某变量 is not defined

所有的赋值操作中查找变量都是LHS。其中a=4 这类赋值操作，也是会从当前作用域中查找，如果没有找到再到外层作用域中找，如果到全局变量啊这个变量，在非严格模式下会创建一个全局变量 a。

注意：不过，非常不建议这么做，因为轻则污染全局变量，重则造成内存泄漏（比如：a = 一个非常大的数组，a在全局变量中，一直用有引用，程序不会自动将其销毁）。

二、词法作用域是什么？

熟悉作用域后，通常我们将其定义为一套规则，这套规则来管理浏览器引擎如何在当前作用域以及嵌套的作用域中根据变量（标识符）进行变量查找。

我们在前面有抛出一个概念：“词法作用域是作用域的一种工作模型”，作用域有两种工作模型：一种主流的是，JavaScript的静态作用域——词法作用域，另一种则是动态作用域（比较少的语言在用）。
先看一下这个代码：

function fn1(x) {
 var y = x + 4;
 function fn2(z) {
 console.log(x, y, z);
    }
    fn2(y * 5);
}
fn1(6); // 6 10 50

例子中有三个嵌套的作用域：A、B、C，

A 为全局作用域，有一个标识符：fn1
B 为fn1所创建的作用域，有三个标识符：x、y、fn2
C为fn2所创建的作用域，有一个标识符：z
如图：
image

作用域， 是由其代码写在哪里决定的，并且是从外向内逐级包含的。

词法作用域， 即在你写代码时将变量和块作用域写在哪里来决定，编译阶段就能够知道全部标识符在哪里以及是如何声明的，词法作用域就是静态的作用域，能够预测在执行代码的过程中如何查找变量（标识符），它在你书写代码时就确定。

一些老司机的疑问：
根据相关资料了解，这里面还会涉及：关于eval()和with的对其词法作用域有其特殊“欺骗”性，以此产生的性能问题，以及ES6中有了let、const所出现的块级作用域。我还没接触到很全面，所以我暂时不会记录这一方面的知识😂~

进入正题：

三、闭包是什么？

1、对闭包的各种解释

MDN的解释：

A closure is the combination of a function and the lexical environment within which that function was declared.闭包，是一个变量所声明的函数+它的词法作用域的结合。

JavaScriptKit的解释

A closure is the local variables for a function - kept alive after the function has returned
闭包对于函数来说是个本地变量，这个变量是当这个函数返回的时候，变量还存在。闭包，能访问当前函数外的变量。

还有《JavaScript高级程序设计》的解释：

闭包是一个函数，指有权访问另一个函数作用域中的变量的函数。

《JavaScript权威指南》的解释：

从技术的角度讲，所有的JavaScript函数都是闭包。它们都是对象，它们都关联到作用域链。

【较认可】《你不知道的JavaScript》的解释：
当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

闭包，是基于词法作用域书写代码时产生的一种现象。通过下面的实践你会知道，闭包在代码中随处可见，不用特意为其创建而创建，前端萌新们，我们可能不知道我们写代码的过程中其实已经产生了闭包。

2、闭包的作用

封装数据
暂存数据

3、从实例浅析闭包

实例1：
先看看下面这个代码：

function fn1() {
    var name = 'iceman';
    function fn2() {
        console.log(name);
    }
    fn2();
}
fn1();

根据《JavaScript高级程序设计》中可知，这个函数出现了闭包。fn2访问到了fn1的变量，满足了书中对闭包的定义“有权访问另一个函数作用域中的变量的函数”，fn2本身是个函数，所以满足《JavaScript权威指南》所说的“所有的JavaScript函数都是闭包”

不过，看得出这是多个函数嵌套，特别是fn2本身是函数，也是一个返回值，也是fn1的赋值变量，对于基础不牢的小白来说还是很容易混淆的。

实例2：
让我们看看下面这个代码：

function car(){
  var speed = 0
  function fn(){
    speed++
    console.log(speed)
  }
  return fn
}

var speedUp = car()
speedUp()   //1
speedUp()   //2

分析如下：

fn的词法作用域能访问car的作用域
根据条件执行fn函数内的代码，fn当做值返回
car执行后，将fn的引用赋值给speedUp，赋值过程即speedUp=car=fn
执行speedUp，分别输出1，2

通过引用的关系，speedUp就是fn函数本身（speedUp=fn）。执行speedUp能正常输出变量speed的值，这不就是“fn能记住并访问它所在的词法作用域”，而fn函数（被speedUp调用）的运行是在当前词法作用域之外。

通常，当car函数执行完毕之后，其作用域是会被销毁的，然后垃圾回收器会释放闭包那段内存空间，但是闭包就这样神奇地将car的作用域存活了下来，fn依然持有该作用域的引用，这块引用即：

 var speed = 0
  function fn(){
    speed++
    console.log(speed)
  }

以上引用就是闭包

总结：某个函数在定义时的词法作用域之外的地方被调用，闭包可以使该函数极限访问定义时的词法作用域。

4、从经典实例深入学习闭包

实例3：
用for循环输出函数值的问题，先看下面代码：

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

通过for循环，预期的结果我们是会输出0-9，但最后执行的结果，在控制台上显示则是全局作用域下的10个10。

这是因为当我们执行fnArr[3]时，先从它当前作用域中找i 的变量，没找到 i 变量，从全局作用域下找。开始了从上到下的代码执行，要执行匿名函数function时，for循环已经结束（for循环结束的条件是当i大于或等于10时，就结束循环），然后执行函数function，此时当 i 等于[0,1,2,3,4,5,6,7,8,9]时，此时i再执行函数代码，输出值都是 i循环结束时的最终值为：10，所以是输出10次10。

由此可知：i 是声明在全局作用域中，function匿名函数也是执行在全局作用域中，那当然是每次都输出10了。

延伸：
那么，让 i在每次迭代的时候都产生一个私有作用域，在这个私有的作用域中保存当前 i的值

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

用一种更简洁、优雅的方式改造：
将每次迭代的 i 作为实参传递给自执行函数，自执行函数用变量去接收输出值

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

#hello，JS：14闭包（词法作用域）

前言：

前置知识：

一、了解词法作用域前，补充作用域下标识符的查找规则

二、词法作用域是什么？

进入正题：

三、闭包是什么？

1、对闭包的各种解释

2、闭包的作用

3、从实例浅析闭包

4、从经典实例深入学习闭包

待续...

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端