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 相关文章推荐
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
Node调用Java的示例代码
Sep 20 Javascript
Js面试算法详解
Apr 08 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
Vue组件系列开发之模态框
Apr 18 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
mayfish 数据入库验证代码
2010/04/30 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
python传递参数方式小结
2015/04/17 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python迭代器常见用法实例分析
2019/11/22 Python
Django 路由层URLconf的实现
2019/12/30 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
精选奢华:THE LIST
2019/09/05 全球购物
发展部经理职责规定
2014/02/22 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
MySQL开启事务的方式
2021/06/26 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers