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 相关文章推荐
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
Less 安装及基本用法
May 05 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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
destoon之一键登录设置
2014/06/21 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
如何卸载python插件
2020/07/08 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
公司中层干部的自我评价分享
2014/03/01 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
协议书格式模板
2016/03/24 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
python基础之文件操作
2021/10/24 Python