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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
javascript实现简易计算器的代码
May 31 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
利用js实现简单开关灯代码
Nov 23 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 文件上传类代码
2011/08/06 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
angular实现input输入监听的示例
2018/08/31 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python编程线性回归代码示例
2017/12/07 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python基础之文件读取的讲解
2019/02/16 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
商场总经理岗位职责
2014/02/03 职场文书
工作违纪检讨书
2014/02/17 职场文书
学雷锋月活动总结
2014/04/25 职场文书
节水口号标语
2014/06/19 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers