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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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/01/27 PHP
php微信公众号开发模式详解
2016/11/28 PHP
php时间戳转换代码详解
2019/08/04 PHP
取得父标签
2006/11/14 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python中logging实例讲解
2019/01/17 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python中温度单位转换的实例方法
2020/12/27 Python
中国电视购物:快乐购
2017/02/04 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
自荐书封面下载
2013/11/29 职场文书
高中军训感言500字
2014/02/24 职场文书
2014春晚主持词
2014/03/25 职场文书
廉洁使者实施方案
2014/03/29 职场文书
销售团队激励口号
2014/06/06 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
教师继续教育反思周记
2015/06/25 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python