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替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
js实现密码强度检验
Jan 15 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
js实现随机点名器精简版
Jun 29 Javascript
js canvas实现俄罗斯方块
Oct 11 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
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
js验证表单大全
2006/11/25 Javascript
JavaScript类库D
2010/10/24 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue中导出Excel表格的实现代码
2018/10/18 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
工程管理英文求职信
2014/03/18 职场文书
初中班主任评语大全
2014/04/24 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
横空出世观后感
2015/06/09 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
js不常见操作运算符总结
2021/11/20 Javascript