×

浅析关于 JS 作用域的几个高频知识点

96
BlindingDark
2017.09.13 19:00* 字数 879

闭包 词法作用域 变量提升


变量提升

什么是变量提升

顾名思义,变量提升指的是,在声明变量的时候,变量的声明位置会被提升至当前作用域最前面。
看这个例子

var foo = "before";

function bar() {
  if (!foo) {
    var foo = "after";
  }

  console.log(foo);
}

bar();

由于变量提升,这里输出的值为 "after"
也就是说,上面的代码其实等价于下面的代码

var foo = "before";

function bar() {
  var foo; // foo == undefined

  if (!foo) { // 判断成立
    foo = "after";
  }

  console.log(foo);
}

bar();

变量提升会提到哪里呢?在 js 里,只有函数级(function level)的作用域,所以上面代码中的 foo 被提到了函数的顶部。
如果上面没有函数,则作为全局变量。

为什么有变量提升

这是一个历史问题,Javascript 语言设计者为了实现相互递归定义,参考了《SICP》4.1.6 节中给出的解决方式,也就是变量提升。

Brendan Eich 的原话为

Function declaration hoisting is for mutual recursion & generally to avoid painful bottom-up ML-like order

那什么是相互递归定义呢?看下面这部分代码。

function is_even(n) {
  if (n == 0) {
    return true;
  } else {
    return is_odd(n - 1);
  }
}

is_even(2); // true

function is_odd(n) {
  if (n == 0) {
    return false;
  } else {
    return is_even(n - 1);
  }
}

is_oddis_even 函数互相调用对方,按理说 is_even 定义的时候 is_odd 还没有定义,应该会报错,但由于有变量提升,所以就可以正常执行了。


词法作用域和闭包

先来看这样一段代码

var a = "before";
function foo(){
  console.log(a);
}

function bar(fun){
  var a = "after";
  fun();
}

bar(foo);

输出结果为 "before"。

为什么不是根据“就近原则”选择变量 a 呢?
这是由于 JS 采用的是词法作用域 (lexical scoping),又叫静态作用域 (static scoping)。
也就是说,变量的绑定在声明的时候就已经确定,而不是在执行的时候再根据上下文就近绑定。
上面的代码中,foo 在声明的时候就已经把 a 绑定为 "before" 了。
这种特性也被称为闭包。或者说,闭包是实现词法作用域的一种方式

其实有些古老的语言的确采用动态作用域 (dynamic scoping) (所谓动态作用域就是在执行的时候才确立变量绑定),比如 shell 脚本,emacslisp 等。
所以如果 JS 采用动态作用域,那么上面的代码将会输出 "after"。


let 和 var

上面我们提到,JS 只有函数级 (function level) 的作用域,这会导致什么问题呢?看下面这段代码。

<ul id="list">
</ul>
<script>
  var list = document.getElementById("list");
  
  for (var i = 1; i <= 5; i++) {
      var item = document.createElement("li");
      item.appendChild(document.createTextNode("Item " + i));
  
      item.onclick = function(ev) {
          alert("Item " + i + " is clicked.");
      };
      list.appendChild(item);
  }
</script>

上述代码的 JSFiddle 在线测试地址
你会发现无论你点击哪个 Item,都只会显示 6。
其是这是由于 i 是在 for 循环中定义的,而不是在函数中定义的,所以它是全局变量,循环完毕之后只有一个 i ,其实此时所有的函数中的 i 都绑定到了那一个 i 上。

上述代码也可以简化为

var array = new Array();
 for (var i = 1; i <= 5; i++) {
   array[i] = function(){
     return i;
   }
 }

array.forEach(function(fun){
  console.log(fun());
})

为了解决这个问题,ES6 中引入了 let 关键字,它有块级(block level)作用域的性质。所谓块级作用域,也就是该变量的有效作用域以花括号 {} 作为边界。所以就不会提前到全局变量中了,而是以 for 循环的花括号作为边界了。

把上面的 var 定义改为 let 或者用一个函数包裹起来,那么点击各个 Item 就会出现不同的数字了。


参考链接

编程语言中的变量作用域与闭包

JavaScript
Web note ad 1