萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js的匿名函數使用介紹

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     
copyright © 萬盛學電腦網 all rights reserved