JavaScript中的函数声明和函数表达式区别浅析
作者:junjie 发布时间:2023-08-05 23:22:36
记得在面试腾讯实习生的时候,面试官问了我这样一道问题。
//下述两种声明方式有什么不同
function foo(){};
var bar = function foo(){};
当初只知道两种声明方式一个是函数声明一个是函数表达式,具体有什么不同没能说得很好。最近正好看到这方面的书籍,就想好好总结一番。
在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明。对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略。
函数声明:
function Identifier ( FormalParameterList opt){ FunctionBody }
函数声明解析过程如下:
1. 创建一个new Function对象,FormalParameterList指定参数,FunctionBody指定函数体。将当前正在运行环境中作用域链作为它的作用域。
2. 为当前变量对象创建一个名为Identifier的属性,值为Result(1)。
函数表达式:
(函数表达式分为匿名和具名函数表达式)
function Identifier opt( FormalParameterList opt){ FunctionBody } //这里是具名函数表达式
具名函数表达式的解析过程如下:
1. 创建一个new Object对象
2. 将Result(1)添加到作用域链的顶端
3. 创建一个new Function对象,FormalParameterList指定参数,FunctionBody指定函数体。将当前正在运行的执行环境中作用域链作为它的作用域。
4. 为Result(1)创建一个名为Identifier 的属性,其值为为Result(3),只读,不可删除
5. 从作用域链中移除Result(1)
6. 返回Result(3)
官方文档读起来十分拗口。简单来说,ECMAScript是通过上下文来区分这两者的:假如 function foo(){} 是一个赋值表达式的一部分,则认为它是一个函数表达式。而如果 function foo(){} 被包含在一个函数体内,或者位于程序(的最上层)中,则将它作为一个函数声明来解析。显然,在省略标识符的情况下,“表达式” 也就只能是表达式了。
function foo(){}; // 声明,因为它是程序的一部分
var bar = function foo(){}; // 表达式,因为它是赋值表达(AssignmentExpression)的一部分
new function bar(){}; // 表达式,因为它是New表达式(NewExpression)的一部分
(function(){
function bar(){}; // 声明,因为它是函数体(FunctionBody)的一部分
})();
还有一种情况:
(function foo(){})
这种情况也是函数表达式,它被包含在一对圆括号中的函数,在其上下文环境中,()构成了一个分组操作符,而分组操作符只能包含表达式,更多的例子:
function foo(){}; // 函数声明
(function foo(){}); // 函数表达式:注意它被包含在分组操作符中
try {
(var x = 5); // 分组操作符只能包含表达式,不能包含语句(这里的var就是语句)
}
catch(err) {
// SyntaxError(因为“var x = 5”是一个语句,而不是表达式——对表达式求值必须返回值,但对语句求值则未必返回值。——译
}
下面简单说说函数声明与函数表达式的异同。声明和表达式的行为存在着十分微妙而又十分重要的差别。
首先,函数声明会在任何表达式被解析和求值之前先行被解析和求值。即使声明位于源代码中的最后一行,它也会先于同一作用域中位于最前面的表达式被求值。还是看个例子更容易理解。在下面这个例子中,函数 fn 是在 alert 后面声明的。但是,在alert 执行的时候,fn已经有定义了:
alert(fn()); //输出Helloworld!
function fn() {
return 'Helloworld!';
}
简单总结,区别在什么地方呢?
1. 声明总是在作用域开始时先行解析;
2. 表达式在遇到时候才运算。
函数声明还有另外一个重要的特点,即通过条件语句控制函数声明的行为并未标准化,因此不同环境下可能会得到不同的结果。即是:
// 千万不要这样做!
// 不同浏览器会有不同返回结果,
if (true) {
function foo() {
return 'first';
}
}
else {
function foo() {
return 'second';
}
}
foo();
// 记住,这种情况下要使用函数表达式:
var foo;
if (true) {
foo = function() {
return 'first';
};
}
else {
foo = function() {
return 'second';
};
}
foo();
那么,使用函数声明的实际规则到底是什么?
FunctionDeclaration(函数声明)只能出现在Program(程序)或FunctionBody(函数体)内。从句法上讲,它们 不能出现在Block(块)({ ... })中,例如不能出现在 if、while 或 for 语句中。因为 Block(块) 中只能包含Statement(语句), 而不能包含FunctionDeclaration(函数声明)这样的SourceElement(源元素)。
另一方面,仔细看一看产生规则也会发现,唯一可能让Expression(表达式)出现在Block(块)中情形,就是让它作为ExpressionStatement(表达式语句)的一部分。但是,规范明确规定了ExpressionStatement(表达式语句)不能以关键字function开头。而这实际上就是说,FunctionExpression(函数表达式)同样也不能出现在Statement(语句)或Block(块)中(别忘了Block(块)就是由Statement(语句)构成的)。
由于存在上述限制,只要函数出现在块中(像上面例子中那样),实际上就应该将其看作一个语法错误,而不是什么函数声明或表达式。
那么我们应该在什么时候使用函数声明或函数表达式呢?函数声明只能出现在“程序代码”中,意味着只能在其它函数体中或者全局空间;它们的定义不能不能赋值给一个变量或属性,或者作为一个参数传递出现在函数调用中;下面的例子是函数声明的允许的用法,foo(),bar()和local()都是通过函数声明模式声明:
// 全局环境
function foo() {}
function local() {
// 局部环境
function bar() {}
return bar;
}
当你在语法上不能使用函数声明的时候,你就可以使用函数表达式。比如:传递一个函数作为参数或者在对象字面量中定义一个函数:
// 这是一个匿名函数表达式
callMe(function () {
//传递一个函数作为参数
});
// 这是一个具名函数表达式
callMe(function me() {
// 传递一个函数作为参数,函数名为me
});
// 其他函数表达式
var myobject = {
say: function () {
// I am a function expression
}
};
学识有限,如有错误,欢迎指正。
猜你喜欢
- 启发式评估法(Heuristic Evaluation)是一种用来发现用户界面设计中的可用性问题从而使这些问题作为再设计过程中的一部分被重视
- 六、XML展望 任何一项新技术的产生都是有其需求背景的,XML的诞生是在HTML遇到不可克服的困难之后。近年来HTML在许多复杂的Web应用
- 我见朋友可以把数据库的记录显示到列表框里去,挺实用,也想做一个。怎么做啊?这简单,代码和说明如下:dblist.asp<html>
- 收集和分发数据是网络管理的职责之一,而且必须确保这些数据的准确性和安全性。不管它们是什么操作系统,数据库服务器需要特殊的管理以保证操作上的安
- Monster是Alipay UED推出的网站代码分析、质量检测及评分的浏览器扩展,它能智能分析CSS、JS、HTML内容并生动形象展示网页
- 从AspJpeg1.8 版本开始,AspJpeg 提供了比 PrintText 更为灵活的文本绘图方法PrintTextEx,PrintTe
- 2008年的圣诞节LOGO依旧延续着2007年的圣诞老人、鹿车、红帽子、圣诞树、蜡烛等元素装点。当然,也少不了雪花,但在LOGO设计上,较0
- 网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在上传后希望能预览一下看上传的对
- 内容摘要:统计在线人数的方法很多,可以使用Application来统计在线人数,也可以使用IP来统计在线人数。各有优点。本文介绍了通过判断S
- 假如某个电脑生产商,它的数据库中保存着整机和配件的产品信息。用来保存整机产品信息的表叫做pc;用来保存配件供货信息的表叫做parts。在pc
- 分页程序sub show_page参数说明:total_records 总记录数everypage_records 每页显示条数
- 很多时候关心的是优化SELECT 查询,因为它们是最常用的查询,而且确定怎样优化它们并不总是直截了当。相对来说,将数据装入数据库是直截了当的
- MSDN:包含正在 SQL Server 实例上运行的进程的相关信息。这些进程可以是客户端进程或系统进程。 视图中主要的字段: 1. Spi
- 1、简单的按钮js事件 用于判断和显示提示 <script type="text/javascript&
- 1. 相对与比较老的环境,建议使用第二个 set dbconnection=Server.CREATEOBJECT("ADODB.
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1、如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- 一、图像缩略图的编辑图像的缩略图是指把图像按原比例缩小,可作为原图的预览,这在网络速度比较慢时可快速地显示图片的概图。当你的网页上有大型图片
- 由于需求没有做好或者客户是外行,不能很好的配合你做好需求,我在使用asp+access的时候非常头疼,遇到数据结构的改动,就必须修改acce
- list.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="936&qu
- 问题: jsp中想要输出的中文被显示成“?” 解决方法 : 在eclipse-windows- preferences中 搜索jsp , E