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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JQuery球队选择实例
May 18 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 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上传、管理照片示例
2006/10/09 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python autoescape标签用法解析
2020/01/17 Python
Python实现数字的格式化输出
2020/08/01 Python
介绍一下OSI七层模型
2012/07/03 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
上课看小说检讨书
2014/02/22 职场文书
个性车贴标语
2014/06/24 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
Go timer如何调度
2021/06/09 Golang
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis