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

三个alert都有结果,说明了匿名函数内部执行了。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值