Javascript 函数声明和函数表达式的区别
Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装、继承等,也可以让代码得到复用。但事物都有两面性,Javascript函数有的时候也比较“任性”,你如果不了解它的“性情”,它很可能给你制造出一些意想不到的麻烦(bugs)出来。
Javascript Function有两种类型:
1)函数声明(Function Declaration);
// 函数声明 function funDeclaration(type){ return type==="Declaration"; }
2)函数表达式(Function Expression)。
// 函数表达式 var funExpression = function(type){ return type==="Expression"; }
上面的代码看起来很类似,感觉也没什么太大差别。但实际上,Javascript函数上的一个“陷阱”就体现在Javascript两种类型的函数定义上。下面看两段代码(分别标记为代码1段和代码2段):
funDeclaration("Declaration");//=> true function funDeclaration(type){ return type==="Declaration"; } funExpression("Expression");//=>error var funExpression = function(type){ return type==="Expression"; } 用函数声明创建的函数funDeclaration可以在funDeclaration定义之前就进行调用; 而用函数表达式创建的funExpression函数不能在funExpression被赋值之前进行调用。 为什么会这样呢?!这就要理解Javascript Function两种类型的区别: 用函数声明创建的函数可以在函数解析后调用(解析时进行等逻辑处理); 而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用。 这个区别看似微小,但在某些情况下确实是一个难以发现的陷阱。 出现这个陷阱的本质原因体现在这两种类型在Javascript function hoisting(函数提升) 和运行时机(解析时/运行时)上的差异。 关于变量提升,可见我的另外一篇博文<JavaScript变量提升>上面两段代码的函数提升可示意为下图:
代码1段JS函数等同于:
function funDeclaration(type){ return type==="Declaration"; } funDeclaration("Declaration");//=> true
代码2段JS函数等同于:
var funExpression; funExpression("Expression");//==>error funExpression = function(type){ return type==="Expression"; }
上述代码在运行时,只定义了funExpression变量,但值为undefined。因此不能在undefined上进行函数调用。此时funExpression赋值语句还没执行到。为了进一步加深JS函数两种类型的区别,下面给出一个更具迷惑性的示例,请看下面的代码(代码段4):
var sayHello; console.log(typeof (sayHey));//=>function console.log(typeof (sayHo));//=>undefined if (true) { function sayHey() { console.log("sayHey"); } sayHello = function sayHo() { console.log("sayHello"); } } else { function sayHey() { console.log("sayHey2"); } sayHello = function sayHo() { console.log("sayHello2"); } } sayHey();// => sayHey2 sayHello();// => sayHello
分析:sayHey是用函数声明创建的,在JS解析时JS编译器将函数定义进行了函数提升,也就是说,在解析JS代码的时候,JS编译器(条件判断不形成新的作用域,两个sayHey函数定义都被提升到条件判断之外)检测到作用域内有两个同名的sayHey定义,第一个定义先被提升,第二个定义接着被提升(第二个定义在第一个定义之下),第二个定义覆盖了第一个sayHey定义,所以sayHey()输出sayHey2;而sayHello是用函数表达式创建的,其表达式的内容是在JS运行时(不是解析时)才能确定(这里条件判断就起到作用了),所以sayHello表达式执行了第一个函数定义并赋值,则sayHello()输出sayHello。
代码段4的代码实际上等同于下面的代码(代码段5):
var sayHello; function sayHey() { console.log("sayHey"); } function sayHey() { console.log("sayHey2"); } console.log(typeof (sayHey));//=>function console.log(typeof (sayHo));//=>undefined if (true) { //hoisting... sayHello = function sayHo() { console.log("sayHello"); } } else { //hoisting... sayHello = function sayHo() { console.log("sayHello2"); } } sayHey();// => sayHey2 sayHello();// => sayHello
有的人也许会怀疑函数sayHey的定义是第二个覆盖第一个了么?我们可以把sayHey的源代码进行输出,有图有真相,如下图所示:
总结
Javascript 中函数声明和函数表达式是存在区别的,函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。而函数表达式的值是在JS运行时确定,并且在表达式赋值完成后,该函数才能调用。这个微小的区别,可能会导致JS代码出现意想不到的bug,让你陷入莫名的陷阱中。
最后附上代码段4中sayHello和sayHey两个函数的核心步骤(个人理解,若有异议欢迎留言探讨):
上图为sayHello函数执行的主要步骤示意图。
原文发布时间为:2018年03月31日
原文作者:张泽立
本文来源:开源中国 如需转载请联系原作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
python介绍、解释器、变量及其它
python 一、python及编程语言介绍 编程语言发展:机器语言==》汇编语言==》高级语言 机器语言:由数字电路发展而来编程都是靠0101的二进制进行 汇编语言:汇编语言的实质和机器语言是相同,只不过指令是采用了英文缩写的标识符比二进制更容易识别记忆。 高级语言:高级语言(High-level programming language)相对于机器语言(machine language,是一种指令集的体系。这种指令集,称机器码(machine code),是电脑的CPU可直接解读的数据)而言。是高度封装了的编程语言,与低级语言相对。它是以人类的日常语言为基础的一种编程语言,使用一般人易于接受的文字来表示(例如汉字、不规则英文或其他外语),从而使程序编写员编写更容易,亦有较高的可读性,以方便对电脑认知较浅的人亦可以大概明白其内容。 解释性语言:程序不需要编译,程序在运行时才翻译成机器语言,每执 行一次都要翻译一次。因此效率比较低。例如Python语言。 编译型语言:程序在执行之前需要一个专门的编译过程,把程序编译成 为机器语言的文件,运行时不需要重新翻译,直接使用编译的结果就行了。程...
- 下一篇
Python机器学习算法面试题,唯一的缺点就是资料太充足,史上最全!
朴素贝叶斯P(A∩B)=P(A)P(B|A)=P(B)P(A|B) 所以有:P(A|B)=P(B|A)*P(A)/P(B) 对于给出的待分类项,求解在此项出现的条件下各个目标类别出现的概率,哪个最大,就认为此待分类项属于哪个类别 工作原理 假设现在有样本x=(a1,a2,a3,…an)这个待分类项(并认为x里面的特征独立)再假设现在有分类目标Y={y1,y2,y3,y4..yn}那么max(P(y1|x),P(y2|x),P(y3|x)..P(yn|x))中的最大者就是最终的分类类别而P(yi|x)=p(x|yi)*P(yi)/P(x)因为x对于每个分类目标来说都一样,所以就是求max(P(x|yi)*p(yi))P(x|yi)p(yi)=p(yi)PI(P(ai|yi)) (PI表示连乘)而具体的p(ai|yi)和p(yi)都是能从训练样本中统计出来p(ai|yi)表示该类别下该特征出现的概率p(yi)表示全部类别中这个这个类别出现的概率好的,就是这么工作的^_^工作流程 准备阶段确定特征属性,并对每个特征属性进行适当划分,然后由人工对一部分待分类项进行分类,形成训练样本。训练阶段计...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装