JavaScript中函数声明提升

    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');
        }
    }

欢迎斧正

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容