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 相关文章推荐
改变隐藏的input中value的值代码
Dec 30 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP 引用文件技巧
2010/03/02 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
Python编程求质数实例代码
2018/01/31 Python
如何基于python实现不邻接植花
2020/05/01 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
旅游项目开发策划书
2014/01/18 职场文书
离婚代理词范文
2015/05/23 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
初中政治教学反思
2016/02/23 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技