您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

js的匿名函数使用介绍

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法,下面为大家介绍下什么是匿名函数及其如何使用

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