美文网首页javascript零基础悟透javaScript编程语言爱好者
你可曾见过如此简单粗暴的JavaScript解说 -- js脚本

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

作者: 剽悍一小兔 | 来源:发表于2016-08-26 12:16 被阅读1496次

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

    首先,上几道我编写的 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
    本章结束 ...
    剽悍一小兔,电气自动化毕业。
    参加工作后对计算机感兴趣,深知初学编程之艰辛。
    希望将自己所学记录下来,给初学者一点帮助。

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

    相关文章

      网友评论

      本文标题:你可曾见过如此简单粗暴的JavaScript解说 -- js脚本

      本文链接:https://www.haomeiwen.com/subject/onaasttx.html