通俗易懂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.

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