通俗易懂JavaScript作用域（一）

 

 记得第一次接触JS的时候，就被JS中的作用域搞得晕头转向，估计初学者也会遇到这个问题，对JS中的作用链了解的不是很深刻。今天小编就带大家来揭开这层神秘的面纱。

 初来乍到

 在网上找这方面材料的时候，碰到一个人在面试的时候关于JS的试题，如下：

 

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

 我了个去，这都什么玩意啊，看着就蒙了，下面小编带大家来慢慢的分析。

 什么是作用域？

 只要学习过编程语言的同志们，肯定知道局部和全局变量，其实这就是所谓的作用域。简单的理解，在什么样的空间和范围可以对变量进行操作。比如你们家的钱，我就访问不到。

 

 JS解析器

 在每个浏览器中都有一个JS解析器，用来解析JS代码，那么又是如何解析的呢？（语法、词法、语义等这些就不说了）

 1.找点玩意

 首先浏览器根据JS代码从中找一些东西，比如var function参数等。并且找到的东西都只是一个定义，并未读到其中的值。所有找到的var变量，在正式运行代码之前都是提前赋值为未定义的，函数在正式运行代码之前都是函数块的形式存在。找到这些东西后都放到一个仓库里面来管理。

 2.分析代码

 说到这里我们来分析一下上述的代码。

 从上向下依次执行，找到了一下东西。

 

 可是我们发现这些东东都叫a，这恐怕不行吧，如果都放到仓库的话，会傻傻分不清楚的，那该如何是好呢？

 PK吧！谁厉害就把谁留下。PK等级为var a—函数块，并且函数块之间是后来者居上。所以经过PK后剩下什么东东呢？

 

 所以经过PK后就剩下最后一个a的函数块了，就把他放到仓库里面了。

 3.逐行解读代码

  上述的过程称为JS的解析，经过解析后就开始逐行读代码了，所以这时候在看的话，就容易理解了。结果如下：

 

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

   未完待续