专栏首页前端黑板报Javascript的函数声明和函数表达式

Javascript的函数声明和函数表达式

Javascript定义函数有两种类型

函数声明

    // 函数声明
    function wscat(type){
        return type==="wscat";
    }

函数表达式

    // 函数表达式
    var oaoafly = function(type){
        return type==="oaoafly";
    }

先看下面这个经典问题,在一个程序里面同时用函数声明和函数表达式定义一个名为getName的函数

    getName()//oaoafly
    var getName = function() {
        console.log('wscat')
    }
    getName()//wscat
    function getName() {
        console.log('oaoafly')
    }
    getName()//wscat

上面的代码看起来很类似,感觉也没什么太大差别。但实际上,Javascript函数上的一个“陷阱”就体现在Javascript两种类型的函数定义上。

JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。

而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用

    var getName//变量被提升,此时为undefined
    getName()//oaoafly 函数被提升 这里受函数声明的影响,虽然函数声明在最后可以被提升到最前面了
    var getName = function() {
        console.log('wscat')
    }//函数表达式此时才开始覆盖函数声明的定义
    getName()//wscat
    function getName() {
        console.log('oaoafly')
    }
    getName()//wscat 这里就执行了函数表达式的值

所以可以分解为这两个简单的问题来看清楚区别的本质

    var getName;
    console.log(getName)//undefined
    getName()//Uncaught TypeError: getName is not a function
    var getName = function() {
        console.log('wscat')
    }
            var getName;
    console.log(getName)//function getName() {console.log('oaoafly')}
    getName()//oaoafly
    function getName() {
        console.log('oaoafly')
    }

这个区别看似微不足道,但在某些情况下确实是一个难以察觉并且“致命“的陷阱。出现这个陷阱的本质原因体现在这两种类型在函数提升和运行时机(解析时/运行时)上的差异。

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

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • tf.RunOptions

    将_cached_byte_size_dirty位设置为true,并将其传播给侦听器(如果这是状态更改)。

    于小勇
  • Hybrid App 应用开发中 5 个必备知识点复习

    我们大前端团队内部 ?每周一练 的知识复习计划还在继续,本周主题是 《Hybrid APP 混合应用专题》 ,这期内容比较多,篇幅也相对较长,每个知识点内容也比...

    pingan8787
  • 如何解决JavaScript中0.1+0.2不等于0.3

    在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!==0.3,这是为什么呢?这个问题也会偶尔被用来当做...

    Javanx
  • Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等)

    我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。

    pingan8787
  • tf.GPUOptions

    将_cached_byte_size_dirty位设置为true,并将其传播给侦听器(如果这是状态更改)。

    于小勇
  • tf.RunMetadata

    将_cached_byte_size_dirty位设置为true,并将其传播给侦听器(如果这是状态更改)。

    于小勇
  • Javascript(ES5)异步编程常见方法

    你可能知道,Javascript语言的执行环境是”单线程”(single thread)。

    javascript.shop
  • CPU密集型和IO密集型与线程池的配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

  • Intellij IDEA 2019 最新乱码解决必杀技,建议收藏!

    栈长也偶尔会用下IDEA,也有一些解决乱码的经验,我给大家总结了以下几类乱码的场景,绝壁能帮你解决 IDEA 各种乱码问题。

    Java技术栈
  • 聊聊nacos config的RequestLogAspect

    nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/aspect/RequestL...

    codecraft

扫码关注云+社区

领取腾讯云代金券