从零开始讲解JavaScript中作用域链的概念及用途

引言
正文
一、执行环境
二、作用域链
三、块级作用域
四、其他情况
五、总结
结束语

之前我写过一篇关于 JavaScript 中的对象的一篇文章，里面也提到了作用域链的概念，相信大家对这个概念还是没有很深的理解，并且这个概念也是面试中经常问到的，因为这个概念实在太重要了，在我们平时写代码时，也可能会因为作用域链的问题，而出现莫名其妙的 bug，导致我们花费大量的时间都查找不出原因。所以我就准备单独写一篇关于作用域链的文章，来帮大家更好地理解这个概念。正文

首先，我们要引入一个概念，叫做 执行环境 （下面简称环境）。在一个执行环境中，有一个与之关联的 变量对象（下面简称对象），在该对象中，储存着这个执行环境中定义的变量和函数。但这个对象只是个形式上的对象，并不能被外界所访问到。

例如，在浏览器中，我们在全局运行下列代码，那么当前的执行环境就是window，也就是全局，并且与该全局环境关联的对象中存储着定义的变量fruit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        let fruit = 'banana'
        alert(fruit)
    </script>
</body>
</html>

那么，在 javascript 中，函数也会形成一个环境，例如下列的代码中，函数的内部就是一个局部的环境，与该环境关联的对象中存储着变量 my_favorite；而此时全局环境window 中，也有一个与之关联的对象，该对象中存储着变量fruit 和函数 fn1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        let fruit = 'banana'
        alert(fruit)
        function fn1() {
            let my_favorite = 'apple'
            return my_favorite
        }
        fn1()
    </script>
</body>
</html>

看了上面两个例子，我们对执行环境应该有了一定的了解，那么这里就将引入 作用域链 的概念了，当代码执行在一个环境中时，会针对环境中储存变量和函数的对象创建一个作用域链，作用域链的最前端就是当前环境的对象，如果当前环境是个函数，则作用域链的下一部分就是全局的 window 环境的变量对象

先来看一下代码部分

<script>
    let fruit = 'banana'
    function fn() {
        let color = 'red'
        // 返回  '我最喜欢的水果是 banana, 我最喜欢的颜色是 red'
        console.log('我最喜欢的水果是' + fruit + ', 我最喜欢的颜色是' + color)
    }
    fn()
    // 报错, color is undefined
    console.log('我最喜欢的水果是' + fruit + ', 我最喜欢的颜色是' + color)
</script>

首先执行了函数 fn，此时函数内的作用域链就是这样的

我们看到，在函数 fn 中，我们使用了变量 fruit 和 color，所以此时会从作用域链的头部开始，从第一个活动变量（本例中第一个变量对象就是函数 fn 的活动变量）中，寻找变量 fruit和 color，发现该变量对象中存在变量 color，于是就成功引用了变量color，但是因为没有找到变量 fruit，于是再沿着作用域链往下找到下一个变量对象（本例中第二个活动变量就是全局 window 的变量对象），发现该变量对象中有我们想要的变量 fruit，则引用该变量 fruit，同时，因为找到了需要引用的变量，就不会继续沿着作用域链继续向下寻找了。我们再来看在函数外，也就是全局window 中，也执行了console.log('我最喜欢的水果是' + fruit + ', 我最喜欢的颜色是' + color)，此时在全局环境中的作用域链是这样的

此时也使用了变量 fruit 和 color，所以这时会从作用域链的头部开始，找到第一个变量对象（本例中第一个活动变量就是 window 全局变量对象），发现该变量对象中有变量 fruit，所以成功引用该变量对象中的 fruit，但因为没找到变量 color，所以继续沿着作用域链向下寻找下一个活动变量，但此时已经找到了作用域链的尾部，并没有别的变量对象了，所以也就无法找到变量 color 了，所以最后返回的就是 undefined。在本例中我们可以看到，当代码处于全局环境中时，是没有访问函数 fn 执行环境中的变量 color 的权力的，这里我们可以这种现象看成是变量 color 的作用域只是在函数 fn 的执行环境内。

在 JavaScript 中是没有块级作用域的，也就是说，由花括号或小括号封闭起来的区域内没有自己的 作用域，例如这两个例子

if(true) {var fruit = 'banana'}
console.log(fruit)    // 返回  banana

我们可以看到，if 语句中的花括号内，使用 var 定义了一个变量 fruit，按照作用域链的规则来说，外部是无法访问到该变量的，但是我们可以看到，确实返回了这个变量的值 banana。

再来看下一个例子

for(var i=0; i<4; i++) {alert(i)
}
console.log(i)    // 返回 4

在使用 for语句时，我们在小括号里使用 var 定义了一个临时变量 i，同样的的，在 for 循环结束以后，在外部访问该变量，也成功返回了相应的值。

以上两个例子，都是因为 JavaScript 没有块级作用域引起的，所以有时会因为这种情况，导致一些不必要的麻烦。在 ES6 中，出现了使用 let 和 const声明变量的方式，来解决了 JavaScript 中没有块级作用域的问题。

你们可以看我之前写的一篇关于let 和 const 声明变量的文章——还没有理解 let 和 const 的用法和区别吗，几百字让你立马搞懂

其实，还有一种情况，会影响变量的访问顺序，那就是在声明变量时，直接给一个未声明的变量赋值，例如这样

function fn() {sum = 1 + 2}
fn()

console.log(sum)      // 返回 3

按照我们本文前面讲解的作用域链的知识，当执行到最后一局代码时，此时处于全局执行环境中，查询不到变量 sum，所以应当会报错 undefined，但这里却返回了 3。

这是因为，在我们使用 var 声明变量时，会自动将该变量放到离该代码最近的活动变量中去，也就是函数 fn 的活动变量中，所以在全局执行环境中的代码就无法访问到该变量。但是如果不使用 var，而是像这个例子中一样，直接给一个未定义的变量赋值，这时会自动地将该变量放到全局的活动变量中去，这就是导致本例中在全局环境中还能访问到变量 sum 的原因。

作用域链可以看成是将变量对象按顺序连接起来的一根链子
每个执行环境中的作用域链都是不同的
当我们引用变量时，会顺着当前执行环境的作用域链，从作用域链的开头开始依次往下寻找对应的变量，直到找到作用域链的尾部，报错 undefined
作用域链保证了变量的有序访问

从零开始讲解 JavaScript 中作用域链的概念及用途

引言

一、执行环境

二、作用域链

三、块级作用域

四、其他情况

五、总结