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

`闭包` `词法作用域` `变量提升` --- ## 变量提升 #### 什么是变量提升 顾名思义,变量提升指的是,在声明变量的时候,变量的声明位置会被提升至当前作用域最前面。 看这个例子 ```javascript var foo = "before"; function bar() { if (!foo) { var foo = "after"; } console.log(foo); } bar(); ``` 由于变量提升,这里输出的值为 `"after"`。 也就是说,上面的代码其实等价于下面的代码 ```javascript 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 那什么是相互递归定义呢?看下面这部分代码。 ```javascript 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_odd` 和 `is_even` 函数互相调用对方,按理说 `is_even` 定义的时候 `is_odd` 还没有定义,应该会报错,但由于有变量提升,所以就可以正常执行了。 --- ## 词法作用域和闭包 先来看这样一段代码 ```javascript 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) 的作用域,这会导致什么问题呢?看下面这段代码。 ```javascript <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 在线测试地址](https://jsfiddle.net/jiacai2050/w6agke9d/)) 你会发现无论你点击哪个 Item,都只会显示 6。 其是这是由于 `i` 是在 `for` 循环中定义的,而不是在函数中定义的,所以它是全局变量,循环完毕之后只有一个 `i` ,其实此时所有的函数中的 `i` 都绑定到了那一个 `i` 上。 上述代码也可以简化为 ```javascript 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 就会出现不同的数字了。 --- ## 参考链接 [编程语言中的变量作用域与闭包](http://liujiacai.net/blog/2016/05/28/scope-closure/)