美文网首页
函数声明之函数提升

函数声明之函数提升

作者: 泉泉泉泉泉泉 | 来源:发表于2019-06-17 17:05 被阅读0次

    Javascript 中函数声明和函数表达式是存在区别的,函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。而函数表达式的值是在JS运行时确定,并且在表达式赋值完成后,该函数才能调用。这个微小的区别,可能会导致JS代码出现意想不到的bug,让你陷入莫名的陷阱中。如下代码:

    declaration()
    function declaration() {
      console.log("declaration")
    }
    express()
    var express = function () {
      console.log("express")
    }
    

    输出结果

    declaration
    /Users/zenglinquan/git/h5-cli/demo.js:125
    express()
    ^
    TypeError: express is not a function
    

    以上两端代码其实等同于以下代码

    function declaration() {
      console.log("declaration")
    }
    declaration()
    
    var express;
    express()
    express= function () {
      console.log("express")
    }
    

    出现以上差异的原因是:
    用函数声明创建的函数可以在函数解析后调用(解析时进行等逻辑处理);而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用。其本质原因体现在这两种类型在Javascript function hoisting(函数提升)和运行时机(解析时/运行时)上的差异。

    我们也可以通过打印两个函数的类型可以知道两者的不同

    console.log(typeof declaration);
    declaration()
    function declaration() {
      console.log("declaration")
    }
    
    console.log(typeof express);
    express()
    var express= function () {
      console.log("express")
    }
    

    输出结果

    function
    declaration
    undefined
    /Users/zenglinquan/git/h5-cli/demo.js:128
    express()
    ^
    TypeError: express is not a function
    

    相关文章

      网友评论

          本文标题:函数声明之函数提升

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