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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
vue实现app页面切换动画效果实例
2017/05/23 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python中for用来遍历range函数的方法
2018/06/08 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python Shapely使用指南详解
2020/02/18 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
世博会口号
2014/06/20 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
自荐信格式模板
2015/03/27 职场文书
在Django中使用MQTT的方法
2021/05/10 Python