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 设计模式(二) 闭包
May 26 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
js变量以及其作用域详解
Jul 18 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
详解封装基础的angular4的request请求方法
Jun 05 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
Smarty安装配置方法
2008/04/10 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python 含参构造函数实例详解
2017/05/25 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
自我鉴定总结
2014/03/24 职场文书
新年联欢会主持词
2014/03/27 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
商业计划书格式、范文
2019/03/21 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android