美文网首页🐋成员文章
JavaScript中函数声明提升

JavaScript中函数声明提升

作者: 干煸小黄鱼儿 | 来源:发表于2017-03-21 14:06 被阅读62次
        a(); // => a
        console.log(b); // => undefined
        function a() {
            console.log('a');
        }
        var b = 'b';
        c(); // => Uncaught TypeError: c is not a function
        if (true) {
            function c() {
                console.log('c');
            }
        }
    

    运行结果:(chrome 54.0+、IE11)

    a
    undefined
    Uncaught TypeError: c is not a function
    

    js中变量声明和函数声明会在解析的时候提升【参考MDN变量提升】。但是为什么if(true)...语句后边的函数没有被提前呢?这和很多其他的博客中描述的完全不一样。依据其他博主的博客中描述输出的结果应该是:

    a
    undefined
    c
    

    函数声明提升的解释

    在MDN中对于函数的描述

    MDN上对于函数声明提升的例子
    即,通过函数声明定义的函数,在解析时会被提升;而通过函数表达式定义的函数不会被解析,只会在运行时解析(执行到此处)。

    MDN中有提到原因:函数表达式定义的函数继承了当前的作用域。换言之,函数构成了闭包。

    对于函数声明和函数表达式的区别:


    函数声明和函数表达式区别

    由此,上边代码的if(true)...中函数部分因为属于函数表达式定义的函数,所以在开始解析的时候并不会被提升到外部作用域,所以c()得到的结果是错误Uncaught TypeError: c is not a function

    顶部代码在经过解析之后的顺序是:

        function a() {
            console.log('a');
        }
        var b;
        a();
        console.log(b);
        b = 'b';
        c();
        if (true) {
            function c() {
                console.log('c');
            }
        }
    

    欢迎斧正

    相关文章

      网友评论

        本文标题:JavaScript中函数声明提升

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