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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
Javascript中this的用法详解
Sep 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
Javascript快速实现浏览器系统通知
Aug 26 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php生成rss类用法实例
2015/04/14 PHP
javascript add event remove event
2008/04/07 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Numpy的简单用法小结
2019/08/28 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python 模块导入问题汇总
2021/02/01 Python
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
岗位职责的构建方法
2014/02/01 职场文书
现金出纳岗位职责
2014/03/15 职场文书
代理人委托书
2014/09/16 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
师范生见习报告
2014/10/31 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript