JavaScript中的函数声明和函数表达式区别浅析


Posted in Javascript onMarch 27, 2015

记得在面试腾讯实习生的时候,面试官问了我这样一道问题。

//下述两种声明方式有什么不同

 

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 

} 

};

学识有限,如有错误,欢迎指正。

Javascript 相关文章推荐
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery使用fadein方法实现渐出效果实例
Mar 27 #Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 #Javascript
javascript包装对象实例分析
Mar 27 #Javascript
javascript操作select元素实例分析
Mar 27 #Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 #Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 #Javascript
jquery使用animate方法实现控制元素移动
Mar 27 #Javascript
You might like
php从字符串创建函数的方法
2015/03/16 PHP
php中执行系统命令的方法
2015/03/21 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
如何写毕业求职自荐信
2013/11/06 职场文书
交通事故私了协议书
2014/04/16 职场文书
委托证明书
2014/09/17 职场文书
九寨沟导游词
2015/02/02 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Python异常类型以及处理方法汇总
2021/06/05 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Win10 Anaconda安装python-pcl
2022/04/29 Servers
MySQL普通表如何转换成分区表
2022/05/30 MySQL