【渗透】关于Javascript的函数声明和函数表达式

zhaochunqi 发布于2019-08-22 18:26 / 3451人阅读

摘要：而函数表达式的值是在运行时确定，并且在表达式赋值完成后，该函数才能调用。

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，让你陷入莫名的陷阱中。

云服务器 GPU云服务器函数的声明c语言函数声明 javascript的函数声明式函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95856.html

重读你不知道的JS (上) 第一节四章

摘要：如果提升改变了代码执行的顺序，会造成非常严重的破坏。声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。要注意避免重复声明，特别是当普通的声明和函数声明混合在一起的时候，否则会引起很多危险的问题你不知道的JS(上卷)笔记你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 Ja...

chanjarster 2019-08-23 15:06 评论0 收藏0
重读你不知道的JS (上) 第一节三章

摘要：如果是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。给函数表达式指定一个函数名可以有效的解决以上问题。始终给函数表达式命名是一个最佳实践。也有开发者干脆关闭了静态检查工具对重复变量名的检查。你不知道的JS(上卷)笔记你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 Ja...

lavor 2019-08-23 15:04 评论0 收藏0
译：函数提升与提升面试的相关问题

摘要：函数提升在里有两种方式创建函数，通过函数声明和函数表达式。函数声明用指定的参数来定义函数。提示不要在中进行函数声明。问题输出两个都是用函数声明的函数，将被提升到的局部作用域顶端。函数本身将作为函数声明在全局范围内提升。作者关于提升的话题，总共有两篇。（后来又有一个讨论篇），再次搬过来。水平有限，如果翻译的不准确请包涵，并去看原文。下面开始：这是我之前的关于提升的文章，标题为《用le...

wuaiqiu 2019-08-21 18:25 评论0 收藏0
JavaScript函数（二）

摘要：目录函数的声明函数的属性和方法函数的作用域闭包知识点小结关于函数，可以从以下个方面去理解首先，数据类型上看函数在中是一种数据类型，是对象的一种其次，从功能上看函数本质上是一段反复调用的代码块最后，从地位上看函数在中和其他基本数据类型一样，可目录 1.函数的声明 2.函数的属性和方法 3.函数的作用域 4.闭包知识点 5.小结关于函数，可以从以下3个方面去理解：首先，数据类型上看：...

用户84 2019-08-21 11:20 评论0 收藏0
浅谈对JavaScript闭包的理解

摘要：关于循环和闭包当循环和闭包结合在一起时，经常会产生让初学者觉得匪夷所思的问题。闭包是一把双刃剑是比较难以理解和掌握的部分，它十分强大，却也有很大的缺陷，如何使用它完全取决于你自己。在谈闭包之前，我们首先要了解几个概念：什么是函数表达式？与函数声明有何不同？ JavaScript查找标识符的机制 JavaScript的作用域是词法作用域 JavaScript的垃圾回收机制先来...

missonce 2019-08-20 11:02 评论0 收藏0