你可曾见过如此简单粗暴的JavaScript解说 -- js脚本运行机制

写作不易，转载请注明出处，谢谢。

首先，上几道我编写的 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 毫秒的时候

Paste_Image.png

编译器看到了这句话，

var a = 0;

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

于是

Paste_Image.png

0.00000002 毫秒的时候

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

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

于是：

Paste_Image.png

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

var a = 100;

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

Paste_Image.png

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

0.00000003 毫秒的时候

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

Paste_Image.png

var a = 0;

a(全局)： js引擎大哥，给我吃饭吧 。。。 js引擎： 吵啥子吵，先给你个undefined，吃这个吧 。 于是：

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

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

别犹豫，大声说出你的答案吧！

可以将答案写在评论中哦！

附上js案例资源帖地址：http://www.jianshu.com/p/19a7a16d66b4 本章结束 ... 剽悍一小兔，电气自动化毕业。 参加工作后对计算机感兴趣，深知初学编程之艰辛。 希望将自己所学记录下来，给初学者一点帮助。

免责声明： 博客中所有的图片素材均来自百度搜索，仅供学习交流，如有问题请联系我，侵立删，谢谢。