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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Django 路由控制的实现
2019/07/17 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
简历中求职的个人自我评价
2013/12/03 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
行政人事岗位职责
2014/03/17 职场文书
家长对老师的评语
2014/04/18 职场文书
外贸业务员求职信
2014/06/16 职场文书
写字楼租赁意向书
2014/07/30 职场文书
顶岗实习计划书
2015/01/16 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android