理解 javascript 中的函数表达式与函数声明


Posted in Javascript onJuly 07, 2017

常用闭包的同学肯定很清楚下面一段代码:

//通常的闭包写法
(function () {
 ...
}())

那么我们的问题来了,为什么要在 function () {...}() 之外用圆括号包裹呢?解答这个问题,就需要我们理解 Javascript 中函数表达式与函数声明的概念。

函数定义带来的错误

虽然 function () {...} 看上去像是一个函数声明,但是由于没有函数名,它的本质其实是一个函数表达式。我们看下规范中对于函数声明与函数表达式的定义:

理解 javascript 中的函数表达式与函数声明

可以看出来,函数声明是必须带有函数名的。所以在直接执行 function () {...}() 时候会报语法错误,原因就是函数表达式被尝试解析为函数声明时没有找到函数名。

理解 javascript 中的函数表达式与函数声明

那么我们继续尝试写上函数名的情况:

function fn () {...}()

理解 javascript 中的函数表达式与函数声明

仍然会提示语法错误,不过这次的出错的位置在后面 () 中的 ) 上。

先不解释为什么,看接下来的示例:

理解 javascript 中的函数表达式与函数声明

从这个结果可以看出,函数声明之后的 () 会被解析为分组运算符,而不是函数调用。那么如何才能使函数执行呢?

如何正确解析函数表达式

根据规范,函数表达式必须在 Expression 中才能进行正确的语法解析。恰巧 () 在作为分组运算符时,里面的内容会被认为是 Expression。

(function () {...}())
(function () {...})()

上述两种写法都是正确的。第一种写法比较清晰,函数表达式被正确解析并调用。第二种写法中,解析器首先处理 (function () {...}) 部分,由于分组运算符不会对其中内容进行 GetValue 操作,所以在语句结束时,其中的函数表达式被直接返回,之后的 () 则表示函数调用。

我们来简单的用一个例子表示一下:

var a = function () {...}
(a()) //形同 (function () {...}())
(a)() //形同 (function () {...})()

这个例子稍有不恰当,因为直接执行 a() 是可行的,而直接执行 function () {...}() 则不行,原因就是上面提到的,function () {...} 被尝试解析为函数声明而引发了语法错误。

其他方式

上面我们提到通过 () 分组运算符,可以将匿名函数正确的理解为函数表达式。同理,我们也可以通过许多其他的运算符将函数表达式正确执行。

!function () {}()
void function () {}()
+function () {}()
-function () {}()
if (function () {}()) {} 
...

由于很多操作符会改变函数返回值,比如 !function () {return 0}void function () {}()+ function () {}() 等,所以我们一般使用 () 将匿名函数包裹使其被正确解析为函数表达式。

参考文章

http://www.zhihu.com/question/40902815/answer/88787368

http://www.zhihu.com/question/20292224

Javascript 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 #Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 #Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 #Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 #Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 #Javascript
JS实现搜索关键词的智能提示功能
Jul 07 #Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 #Javascript
You might like
JavaScript中URL编码函数代码
2011/01/11 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python输入二维数组方法
2018/04/13 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
pycharm安装和首次使用教程
2018/08/27 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python函数不定长参数使用方法解析
2019/12/14 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
运动会致辞稿50字
2014/02/04 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
同学毕业留言寄语
2015/02/27 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书