学习并汇集javascript匿名函数


Posted in Javascript onNovember 25, 2010

古人有"授之以鱼,不如授之以渔" ,没有老师,就只能自己学"渔"了。还是从简单的开始吧!
下面的这几句代码是最熟悉不过的了,但是你知道为什么这么写吗?为什么在页面中加上这几句代码,jQuery对象就已经被引入了。

 (function($){ 
 //功能的实现code 
 })(jQuery);
我就从这个开始了!程序员都懂得如何google和baidu。同样我也一样...噢!原来这是javascript的匿名函数。

这个匿名函数是什么东西呢?慢慢来学习吧!
JavaScript定义一个函数一般有如下三种方式:
1. 函数关键字(function)语句:

function Name(a) { 
return a; 
}

2. 函数字面量(Function Literals):
var Name = function(a){ 
return a; 
}

3. Function()构造函数:

var Name = new Function('a','return a;')
上面三种方法定义了同一个方法函数Name ,第1种就是最常用的方法,后两种都是把一个函数复制给变量Name ,而这两个函数是没有名字的,难道这就是所谓的匿名函数吗?看下面的解释吧!

函数字面量和Function()构造函数是有区别的!
(1). 函数字面量是一个匿名函数,语法允许为其指定任意一个函数名,当写递归函数时可以调用它自己,使用Function()构造函数则不行。

var f = function fact(x) { 
if (x < = 1) 
return 1; 
else 
return x*fact(x-1); 
};

(2). Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。
(3). Function()构造函数每次执行时都解析函数主体,并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反,函数字面量却不是每次遇到都重新编译的。
(4). 用Function()构造函数创建一个函数时并不遵循典型的作用域,它一直把它当作是顶级函数来执行。
var y = "global"; 
function constructFunction() { 
var y = "local"; 
return new Function("return y"); // 无法获取局部变量 
} 
alert(constructFunction()()); // 输出 "global"

在这里还涉及到一个名称,那就是Function 对象 ,Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。因此上面的那三个都是function对象。
以上可以总结为:function对象可以用普通常规的方式、构造方式来创建函数,并且函数也是可以没有名字的(匿名函数)。
继续匿名函数,顾名思义,匿名函数就是没有实际名字的函数。例如,我们把上面的例子中。函数的名字去掉,再判断一下2,3是不是一个函数:
alert(typeof function(){}); // "function" 
alert(typeof function(a){return a;}); // "function" 
alert(typeof new Function("a","return a;")) // "function"

都返回的是function对象,看来没有名字但是确实还是函数。那么我们如何去调用一个匿名函数的呢?
要调用一个函数,我们必须要有方法定位它,引用它。所以,我们会需要帮它找一个名字。这也就是这个例子2,3“Name”起的作用了。并且这也是我们经常会见到的格式。
在这里其实还有一种做法,那就是刚开是给出的jQuery代码,即使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。让我们猫一下下面的代码吧!
alert((function(x,y){return x+y;})(2,3)); // "5" 
alert((new Function("x","y","return x*y;"))(2,3)); // "6"

很多人或许会奇怪,为什么这种方法能成功调用呢?不忙再看段代码,或许就明白了。
// 把匿名函数对象赋给abc 
var abc=function(x,y){return x+y;}; 
alert((abc).constructor==(function(x,y){return x+y;}).constructor); 
// abc的constructor就和匿名函数的constructor一样了。也就是说,两个函数的实现是一样的。

如果觉得这个应用还很奇怪的话,就看一下我从网上看的这段解释吧。  
 小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式 的返回值。所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function对象。因此,小括号对加上匿名函 数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。
最后让我们看看匿名函数的代码模式吧!
错误模式:其无法工作,浏览器会报语法错。

function(){ alert(1); }();
1. 函数字面量:首先声明一个函数对象,然后执行它。
(function(){ alert(1); } ) ( );
2. 优先表达式:由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数。
( function(){ alert(2); } ( ) );
3. Void操作符:用void操作符去执行一个没有用圆括号包围的一个单独操作数。
void function(){ alert(3); }()
这三种方式是等同的,用那种看你的想法了。
呵呵!这就差不多了!这次我明白了,开始的那几句jQuery原来是函数字面量啊!
(匿名函数)(参数) (function($){})(jQuery);

Javascript 相关文章推荐
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 #Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 #Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 #Javascript
HTML颜色选择器实现代码
Nov 23 #Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 #Javascript
Js切换功能的简单方法
Nov 23 #Javascript
validator验证控件使用代码
Nov 23 #Javascript
You might like
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
python实现基本进制转换的方法
2015/07/11 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python 串口读写的实现方法
2019/06/12 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
社区十八大感言
2014/01/19 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
加入学生会演讲稿
2014/04/24 职场文书
2014年妇联工作总结
2014/11/21 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python