JavaScript的词法作用域问题

Posted 2021-01-08 Kingsley

多年以前，当我怀揣着前端工程师的梦想时，曾经认真阅读过《javascript高级程序设计（第2版）》。里面有一个问题（P147），让我一直百思不得其解。

 1 function createFunctions(){
 2     var result = new Array();
 3     
 4     for(var i = 0; i < 10; i++){
 5         result[i] = function() {
 6             return i;
 7         }
 8     }
 9     return result;
10 }
11 
12 var funcs = createFunctions();
13 
14 for(var i = 0; i < funcs.length; i++) {
15     console.log(funcs[i]());
16 }

表面上看，最终会输出各个元素对应的索引，依次输出0，1，2……9。但实际上却是输出10个10

1. 词法作用域

简单地说，词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下是这样的）。

而无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

最常见的作用域是函数作用域，除此之外，还有其他类型的作用域，例如with，try catch, let, const;

2. 原因分析

那么上面这题的原因是什么呢？

我们预期，在result赋值时，会将i传入到函数中，并保存它的值。这样我们在调用各个元素指向的函数时，就可以获取到赋值时的值，也就是索引值。这显然是不正确的。

上面我们说到，无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

我们在给result数组赋值时，仅仅是将函数的引用赋给result的元素，而不是立即执行函数的内容，打印索引值。

所以，当我们调用函数，执行console.log(i)时，将会从函数定义的位置开始查找其作用域里的变量。

要注意的是，for循环的块，并不是作用域，所以变量i的作用域，是在整个函数里。也就是说，在createFunctions这个函数的作用域之内，存在一个变量名为i。

那么调用函数里面找不到i, 就往上找，在createFunctions的作用域里终于找到了i。

此时i经过循环，已经变成10. 所以无论是调用哪个元素指向的函数，都是打印10。

下面的例子也是一样的原因。

1 for (var i = 1; i <= 5; i++){
2     setTimeout(function timer() {
3         console.log(i);
4     }, i * 1000);
5 }

而这个问题，其实还引入了另一个知识点，闭包。

什么是闭包？当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

百度的解释是：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

意思差不多。

那么下面这个是闭包吗？

1 function foo() {
2     var a = 2;
3     function bar() {
4         console.log(a);
5     }
6     bar();
7 }
8 foo();

严格来说，这个不是闭包。我的理解是，foo()的调用并不能真正访问到foo作用域里的变量，这和闭包的定义不一样。

1 function foo() {
2     var a = 2;
3     function bar() {
4         console.log(a);
5     }
6     return bar;
7 }
8 var baz = foo();
9 baz();

这个就是闭包。在foo()执行后，通常会期待foo()的整个内部作用域都被销毁，因为我们知道引擎有垃圾回收器来释放不再使用的内存空间。由于看上去foo()的内容不会再被使用，所以很自然地会考虑对其进行回收。

而闭包的神奇之处正是可以阻止这件事情的发生。事实上内部作用域依然存在，因此没有被回收。谁在使用这个内部作用域？原来是bar()本身在使用。

拜bar()所声明的位置所赐，它拥有涵盖foo()内部作用域的闭包，使得该作用域能够一直存活，以供bar()在之后任何时间进行引用。

bar()依然持有对该作用域的引用，而这个引用，就叫作闭包。

关于闭包，可以参考这个：

带你一分钟理解闭包--js面向对象编程

3. 如何解决

我们很容易想到，如果给每个函数在赋值时，拥有自己的作用域，应该可以解决问题。IIFE可以尝试一下。

 1  function createFunctions(){
 2      var result = new Array();
 3      
 4      for(var i = 0; i < 10; i++){
 5         (function() {
 6              result[i] = function() {
 7                  return i;
 8              }
 9          })();
10      }
11      return result;
12  }
13  
14  var funcs = createFunctions();
15  
16  for(var i = 0; i < funcs.length; i++) {
17      console.log(funcs[i]());
18  }

这显然是不行的。虽然多了作用域，但其里面并没有i变量，还是得找到上一层作用域，那么找到的仍然是10.

 那么我们就在作用域里加上一个变量吧！

 1  function createFunctions(){
 2      var result = new Array();
 3      
 4      for(var i = 0; i < 10; i++){
 5         (function() {
 6              var j = i;
 7              result[i] = function() {
 8                  return j;
 9              }
10          })();
11      }
12      return result;
13  }
14  
15  var funcs = createFunctions();
16  
17  for(var i = 0; i < funcs.length; i++) {
18      console.log(funcs[i]());
19  }

再进行改造一番。

 1  function createFunctions(){
 2      var result = new Array();
 3      
 4      for(var i = 0; i < 10; i++){
 5         (function(j) {
 6              result[i] = function() {
 7                  return j;
 8              }
 9          })(i);
10      }
11      return result;
12  }
13  
14  var funcs = createFunctions();
15  
16  for(var i = 0; i < funcs.length; i++) {
17      console.log(funcs[i]());
18  }

还有一种是利用ES6的新特性，let关键字来解决。

仔细思考我们刚才的解决方法，我们使用IIFE在每次迭代时都创建一个新的作用域。换句话说，每次迭代我们都需要一个作用域。

而let关键字，可以用来劫持块作用域，本质上这是将一个块成一个可以被关闭的作用域。

 1  function createFunctions(){
 2      var result = new Array();
 3      
 4      for(let i = 0; i < 10; i++){
 5         
 6          result[i] = function() {
 7              return i;
 8          }
 9      }
10      return result;
11  }
12  
13  var funcs = createFunctions();
14  
15  for(var i = 0; i < funcs.length; i++) {
16      console.log(funcs[i]());
17  }

 

参考资料：

《你不知道的JavaScript（上卷）》 一本好书啊