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开发的数独游戏代码
Oct 29 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python单例模式的两种实现方法
2017/08/14 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
python中if嵌套命令实例讲解
2021/02/25 Python
广州一家公司的.NET面试题
2016/06/11 面试题
什么是网络协议
2016/04/07 面试题
应聘自荐书
2013/10/08 职场文书
2013年保送生自荐信格式
2013/11/20 职场文书
护理个人求职信范文
2014/01/08 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
秋游活动策划方案
2014/02/16 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python