js的匿名函数使用介绍

330 阅读 0 评论 218 点赞

我是靠谱客的博主健康小甜瓜，最近开发中收集的这篇文章主要介绍js的匿名函数使用介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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 