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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
js友好的时间返回函数
Aug 24 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
vuex state及mapState的基础用法详解
Apr 19 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
JavaScript的Function详细
2006/11/14 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python 实现简单的电话本功能
2015/08/09 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
护理工作感言
2014/01/16 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
搞笑创意广告语
2014/03/17 职场文书
股东协议书范本
2014/04/14 职场文书
学校花圃的标语
2014/06/18 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
python库sklearn常用操作
2021/08/23 Python