理解 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 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python Pygame的具体使用讲解
2017/11/03 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python中最小二乘法详细讲解
2021/02/19 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
历史学专业个人的自我评价
2013/10/13 职场文书
商务助理岗位职责
2013/11/13 职场文书
门卫班长岗位职责
2013/12/15 职场文书
大型晚会策划方案
2014/02/06 职场文书
会计主管岗位职责
2015/04/02 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers