从未有过如此简单粗暴的JavaScript解说——JS脚本运行机制

chenTUPI 2017-02-20

展开全文

来源：http://www.jianshu.com/p/d530bf4f44e3

作者：剽悍一小兔（简书作者）

正文

首先，上几道我编写的 JS 题，作为分析的样本。

请根据代码，选择正确的选项。

第一题

var a = 0;function test(){
alert(a);
}
test();

A. 0

B. null
C. undefined

第二题

var a = 0;function test(){
alert(a);
a = 100;
}
test();

A. 0

B. null
C. undefined

第三题

var a = 0;function test(){
alert(a); var a = 100;
}
test();

A. 0

B. 100
C. undefined

正确答案：A；A；C

前两题没啥好说的，之前关于闭包的博文中已经讲得很清楚了，函数 test 形成了自己的闭包，所以能够访问到全局作用域里面的变量 a 。

第三题可能有人会觉得有点奇怪，为啥是 undefined 的呢？虽然我在闭包内定义了 var a = 100 , 可是它分明是在 alert 语句的下面啊，所以不是应该先打印出全局作用域里的 a 吗？

不要着急，我们来讲一个故事吧，当你将这段代码放进浏览器跑起来的那一个瞬间，到底发生了哪些有趣的事情。

当你刷新浏览器之后。。。

0.00000001 毫秒的时候

编译器看到了这句话，

var a = 0;

编译器： ‘nice,发现一个活的 a 变量，我要把它丢到作用域中去囚禁它！

于是

0.00000002 毫秒的时候

编译器： nice,发现一个活的 test 变量，我擦，还是一个函数类型，作用域，又有新货了！

作用域： ‘可以呀，小伙子！’

于是：

编译器顺便把 test 函数给“扒”了，又发现里面有这么一句话：

var a = 100;

编译器：小样，别以为你躲在 test 函数的私有作用域里面我就找不到你了，全局作用域中的a和你没关系，你也进去！

编译器：嗯，没找到什么变量定义了，好，我去休息啦。

0.00000003 毫秒的时候

js引擎：终于轮到我出场了。

var a = 0;

a(全局)： js引擎大哥，给我吃饭吧。。。

js引擎：吵啥子吵，先给你个undefined，吃这个吧。

于是：

a(全局)：只要心中有梦想，undefined也是嚼劲十足！
js引擎：等号右边有一个 0 ，我把它给你吧。
a(全局)：谢谢引擎大哥。

同样的，test 变量也吃上了饭。

a(局部) ：大哥，我别这么偏袒全局作用域啊，同样是 a 变量，我也要吃饭啊！
js引擎：你在函数内部，我还没执行函数呢，怎么给你吃饭呀，先给你个undefined吧。
a(局部) ：可是我旁边有一个100啊。
js引擎：我刚才不是说了吗，我还没执行你呢，别挑了，有个undefined啃啃也不错了。

0.00000004 毫秒的时候

test();

js引擎：我要开始执行test函数了。

alert(a);

js引擎：作用域在吗，我知道alert是一个内置函数，当我在执行它的时候，发现有一个a变量作为参数传进去了，你见过它么？

作用域：有啊，就那个刚才还吵着要吃饭的家伙。

js引擎：哦，我想起来了，现在它估计还在啃undefined呢，行吧，你把它给我吧，alert方法点名要找他呢。

作用域：OK。

故事到这里就讲完了，现在你应该明白为什么第三题的答案是undefined了吧。

附加题：

var a = 0;function test(){
alert(a); if(false){ var a = 100;
}
}
test();

A. 0
B. 100
C. undefined