Posted in Javascript onDecember 11, 2013
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都有结果,说明了匿名函数内部执行了。
js的匿名函数使用介绍
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@