js的匿名函数使用介绍
更新时间：2013年12月11日 16:56:58 作者：
匿名函数的作用是创建一块封闭区域，外面不能够访问里面的变量和方法，下面为大家介绍下什么是匿名函数及其如何使用
1.匿名函数概述
关于匿名函数的第一次认识还是在jquery源码里，打开jQuery首先看到的是
(function( window, undefined ) {.......................})(window);
这就是一个匿名函数，红色为参数，匿名函数的作用是创建一块封闭区域，外面不能够访问里面的变量和方法。
既然不能访问，那怎么能调用jquery？这是因为jquery的匿名函数有这样两句话（蓝色字）：
(function( window, undefined ) {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},
.........
window.jQuery = window.$ = jQuery;
})(window);
原来在匿名函数里将jQuery传给了window，这也就是为什么参数的传递中要传递window，所以以后每次调用jquery其实是调用window的jQuery这个对象。
由jquery调用自己里面的方法。外面是无法调用的，这样可以保证安全和不冲突。
2.接着上面的话题，关于jQuery的插件
以下是我写的分页控件的部分代码：
;(function ($) {
$.fn.tabing = function (arg) {
instance = new Plugin(this, arg);
};
var instance = null;
function Plugin(element){
this._tabs = $(element);
this._tabli = $("a[href*='#']",this._tabs);
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']");
this.init();
}
Plugin.prototype = {
init: function(){
this._tabli.addClass("unselected");
this._tabli.eq(0).addClass("selected");
this._tabDiv.css("display","none");
this._tabDiv.eq(0).css("display","block");
this._tabli.each(function(){
$(this).bind("click",function(){
for(var i = 0;i<instance._tabDiv.length;i++){
instance._tabDiv.eq(i).css("display","none");
}
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block");
});
})
}
}
})(jQuery);
注意红色的字，其实jQuery插件也是在写匿名函数，这样保证每个插件的独立性，要不怎么叫插件，红色的字$.fn.tabing说明在这个插件里面有个tabing给了jquery的fn，
这样外面的jquery对象就可以直接调用tabing，这也是插件与外界的唯一接触。
3. 说完了jquery插件对匿名函数的使用，再说一下window的匿名函数
其实jquery本身就是window的匿名函数，即第一点，那我们怎么写window的匿名函数呢？
即写了匿名函数后，在函数里面有个与window交互的接口，例如下面：
(function(){
function getObjByID(id){
return document.getElementById(id);
}
function __addClass(id,className,classValue){
$(id).style.className=classValue;
}
window.addClass=__addClass;
})();
同样是看红色的字，这样在该匿名函数外就可以调用addClass（），但无法调用getObjByID（）。
4.匿名函数也会在解析的时候执行
如下：
function Video() { };
function Movie() { };
var _video = new Video();
_video.size = 3;
_video.toString = function () {
return "video";
};
_video.getName = function () {
return "VideoXXX";
};
var _movie = new Movie();
(function (parent, child) {
for (var ele in parent) {
if (!child[ele]) //在child不包含该属性或者方法的时候，才会拷贝parent的一份
child[ele] = parent[ele];
}
})(_video, _movie); //匿名函数调用的方式
alert(_movie.size); //3
alert(_movie.toString()); //[object Object]
alert(_movie.getName()); //VideoXXX
三个alert都有结果，说明了匿名函数内部执行了。
关于匿名函数的第一次认识还是在jquery源码里，打开jQuery首先看到的是
复制代码 代码如下:
(function( window, undefined ) {.......................})(window);
这就是一个匿名函数，红色为参数，匿名函数的作用是创建一块封闭区域，外面不能够访问里面的变量和方法。
既然不能访问，那怎么能调用jquery？这是因为jquery的匿名函数有这样两句话（蓝色字）：
复制代码 代码如下:
(function( window, undefined ) {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},
.........
window.jQuery = window.$ = jQuery;
})(window);
原来在匿名函数里将jQuery传给了window，这也就是为什么参数的传递中要传递window，所以以后每次调用jquery其实是调用window的jQuery这个对象。
由jquery调用自己里面的方法。外面是无法调用的，这样可以保证安全和不冲突。
2.接着上面的话题，关于jQuery的插件
以下是我写的分页控件的部分代码：
复制代码 代码如下:
;(function ($) {
$.fn.tabing = function (arg) {
instance = new Plugin(this, arg);
};
var instance = null;
function Plugin(element){
this._tabs = $(element);
this._tabli = $("a[href*='#']",this._tabs);
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']");
this.init();
}
Plugin.prototype = {
init: function(){
this._tabli.addClass("unselected");
this._tabli.eq(0).addClass("selected");
this._tabDiv.css("display","none");
this._tabDiv.eq(0).css("display","block");
this._tabli.each(function(){
$(this).bind("click",function(){
for(var i = 0;i<instance._tabDiv.length;i++){
instance._tabDiv.eq(i).css("display","none");
}
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block");
});
})
}
}
})(jQuery);
注意红色的字，其实jQuery插件也是在写匿名函数，这样保证每个插件的独立性，要不怎么叫插件，红色的字$.fn.tabing说明在这个插件里面有个tabing给了jquery的fn，
这样外面的jquery对象就可以直接调用tabing，这也是插件与外界的唯一接触。
3. 说完了jquery插件对匿名函数的使用，再说一下window的匿名函数
其实jquery本身就是window的匿名函数，即第一点，那我们怎么写window的匿名函数呢？
即写了匿名函数后，在函数里面有个与window交互的接口，例如下面：
复制代码 代码如下:
(function(){
function getObjByID(id){
return document.getElementById(id);
}
function __addClass(id,className,classValue){
$(id).style.className=classValue;
}
window.addClass=__addClass;
})();
同样是看红色的字，这样在该匿名函数外就可以调用addClass（），但无法调用getObjByID（）。
4.匿名函数也会在解析的时候执行
如下：
复制代码 代码如下:
function Video() { };
function Movie() { };
var _video = new Video();
_video.size = 3;
_video.toString = function () {
return "video";
};
_video.getName = function () {
return "VideoXXX";
};
var _movie = new Movie();
(function (parent, child) {
for (var ele in parent) {
if (!child[ele]) //在child不包含该属性或者方法的时候，才会拷贝parent的一份
child[ele] = parent[ele];
}
})(_video, _movie); //匿名函数调用的方式
alert(_movie.size); //3
alert(_movie.toString()); //[object Object]
alert(_movie.getName()); //VideoXXX
三个alert都有结果，说明了匿名函数内部执行了。
相关文章
js面向对象是js中比较重要的一个环节，对于节约代码，封装起来方便使用，性能都有一些帮助，希望大家仔细学习。2009-01-01
这篇文章主要介绍了JavaScript中的Math.LOG2E属性使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JavaScript中的fontsize()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once》），它们分别是NN4、IE4+和W3C/Safar。2014-06-06
ECMA-262中描述了一组具有特定用途的关键字，关键字属于语言保留，不可以用于标示符，学习js的朋友可以看看2014-10-10
javascript使用window.open提示“已经计划系统关机”的原因
这篇文章主要介绍了javascript使用window.open提示“已经计划系统关机”的原因,本文得出结论是安装了系统更新或其它原因,要把系统重启时才会提示这个问题,所以,遇到这个问题,重启你的电脑吧2014-08-08
本文向大家简单介绍了javascript的数据类型以及他们直接的转换方法，虽然没有太多示例，但是也是个人的一些经验总结，这里推荐给大家。2015-02-02
javascript typeof id===''string''?document.getElementById(id
刚开始学习js的朋友可能会有些疑问，其实这段代码使用js的三元运算符，这样代码看起来高大上，最主要是代码段少2016-11-11
JavaScript 中的构造函数和其它语言中的构造函数是不同的。 通过 new 关键字方式调用的函数都被认为是构造函数。任何JavaScript 函数都可以用做构造函数，构造函数必须 使用new 运算符作为前缀来创建新的实例。2015-06-06
这篇文章主要介绍了使图片旋转的3种解决方案,并了几个方法的对比，大家参考看一下吧2013-11-11
最新评论