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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
jquery实现轮播图特效
Apr 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
微信小程序合法域名配置方法
2019/05/06 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python raise的基本使用
2020/09/10 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
Android interview questions
2016/12/25 面试题
学年末自我鉴定
2014/01/21 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
安全员岗位职责
2015/02/10 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书