Javascript 匿名函数及其代码模式原理


Posted in Javascript onMarch 19, 2010

关于什么是匿名函数,及它带来的优势在本文就不深究了,先抛出一个常用的匿名函数:
(function(){alert('yo')})()
很多同学知道怎么用这种匿名函数,却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数,而并不清楚前面的圆括号具有何种含义!本文将带你了解匿名函数的代码模式原理。
OK,先来看看更多匿名函数调用模式:

(function(){alert(1);}()) 
(function(){alert(2);})() 
void function(){alert(3);}()

以上3个都是正确的,且在功能上都是等同的。
再来看下错误的书写方式:
4.
function(){alert('yo')}()
上面这段代码会抛出语法错误,这究竟是为什么呢?带着这个问题我们来看看秦歌给出的解答:
1.函数字面量:首先声明一个函数对象,然后执行它。
2.优先表达式:由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数。
3.void操作符:用void操作符去执行一个没有用圆括号包围的一个单独操作数。
好吧,先不管解答是否正确,我们把这些放到一边,再来看看函数声明的语法和函数表达式的语法说明:
一、函数声明:
function name([param[, param[, ... param]]]) { 
statements 
}

这里的函数名称name是不可以省略的。如果省略了函数名称就会报错。
这也合理解释了为什么直接写
function(){alert('yo')}
会出错?因为编译器当他是函数声明而代码中没有出现函数名称,结果可想而知。
二、函数表达式:
function [name]([param] [, param] [..., param]) { 
statements 
}

函数名称name可以被省略,省略name就是所谓的匿名函数。说明一点:如果需要创建匿名函数,则必须给出一个函数表达式而非函数的显式声明
现在我们可以做出更准确的解释:
1\2\3匿名函数代码模式只不过是通过括号或者void告诉编译器,把function(){}当作函数表达式来解释罢了。这其中并没有那么复杂的优先级和void操作符原理。这只不过是一个简单的语法转换。
可以想象,只要符合函数表达式的语法,我们就可以创建出N种匿名函数代码模式,比如
!!function(){ 
alert('yo'); 
}() 
+function(){ 
alert('yo'); 
}()

等等等等……
这其中并没有更深层的奥秘,只是函数声明与表达式的区别,如果你还不理解,也许就是你想多了想复杂了。
我们现在学习Javascript还没有特专业的培训安排与课程,编码能力的提升都是要靠自己平时的练习与积累。然而越是这样越容易忽略最基础的知识,最后把简单的问题复杂化,不可取。更有些同学是抱着能够使用的态度学习Javascript,而并不去深究,知其然而不知其所以然,其实到最后能力并没有多大的提升……更不可取!
延伸阅读:
What do parentheses surrounding a JavaScript function declaration mean?
Javascript 相关文章推荐
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
JS 有名函数表达式全面解析
Mar 19 #Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 #Javascript
JavaScript 高效运行代码分析
Mar 18 #Javascript
JS setCapture 区域外事件捕捉
Mar 18 #Javascript
小议Javascript中的this指针
Mar 18 #Javascript
jQuery each()方法的使用方法
Mar 18 #Javascript
jQuery each()小议
Mar 18 #Javascript
You might like
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
中学门卫岗位职责
2013/12/26 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
水电工岗位职责
2015/02/14 职场文书
安全生产会议制度
2015/08/06 职场文书
求职信如何撰写?
2019/05/22 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python