通俗易懂JavaScript作用域（三）

上述两篇博客主要带大家分析了两个有点迷糊的Demo，但是关于作用链的知识还是没有出现，下面我们再来做一个变形。

变形二

<span style="font-family:SimSun;font-size:18px;"><script>
        var a = 1;
        function fn1() {
            alert(a);
            a = 2;
            alert(a);
        }
        fn1();

    </script></span>

代码分析

这个例子只不过是上篇博客中例子的一部分，但是涉及到了作用链的东东。下面再来分析一下。

 1.JS预解析

就不多废话了，直接出结果

2.解读代码

在解读过程中，当遇到函数调用时，我们知道又将开始上述过程：JS预解析——代码执行，解析结果是：

我们发现跟上图并并没有区别，那么开始执行吧！

当执行fn1（）函数中的alert（a）时，此时有趣的事情发生了，作用链机制就出现了，通过上图发现，fn1（）函数块的圈子里面并没有有关a的定义，那么该怎么办呢？

此时，就会通过作用链机制，向上一级查找，直到找到为止。效果图如下：

所以我们发现执行fn1（）中的alert（a）时，通过作用链，找到外围圈子中的a，输出结果来。

接着向下执行，当执行fn1（）中的第二个alert（a）时，由于在此圈子中已经为a赋值为2，所以紧接着会输出结果2.

这就是所谓的作用链机制，再查找变量的时候，会自底向上，一层一层的查找，直到找到为止。