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 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
基于element-ui的rules中正则表达式
Sep 04 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
详解php中的implements 使用
2017/06/13 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
软件工程师面试题
2012/06/25 面试题
幼儿园门卫岗位职责
2014/02/14 职场文书
企业文化标语大全
2014/06/10 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
读群众路线的心得体会
2014/09/03 职场文书
晚会开幕词
2015/01/28 职场文书
企业投资意向书
2015/05/09 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python