jQuery extend方法介绍

jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend(object);

jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。

1.合并多个对象。
这里使用的就是$.extend()的嵌套多个对象的功能。
所谓嵌套多个对象，有点类似于数组的合并的操作。

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
</span> 

2、深度复制

1.  <script type="text/javascript" src="jquery-extend.js"></script> 

2.  <script> 

3.  obj1 = { a : 'a', b : 'b' }; 

4.  obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' }; 

5.  $.extend(true, obj1, obj2); 

6.  alert(obj1.x.xxx);  // 得到"xxx" 

7.  obj2.x.xxx = 'zzz'; 

8.  alert(obj2.x.xxx); // 得到"zzz" 

9.  alert(obj1.x.xxx); // 得到"xxx" 

10.</script>  

$.extend(true, obj1, obj2)表示以obj2中的属性扩展对象obj1，第一个参数设为true表示深复制。

虽然obj1中原来没有"x"属性，但经过扩展后，obj1不但具有了"x"属性，而且对obj2中的"x"属性的修改也不会影响到obj1中"x"属性的值，这就是所谓的“深复制”了。

3.可以给jQuery添加静态方法。

（可以看下我之前的弹窗方法）

$.fn.mPop = function() {
        $("body").css("position", "relative");
        var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
        var winW = $(window).width();
        var winH = $(window).height();
        var tcH = $(document).height();
        var w = $(this).innerWidth();
        var h = $(this).innerHeight();
        $(this).css({"height":winH});
        $(".lottery_popup_bg").css({"height":winH});
        $(".tips_popup").css({"height":"auto"});
        $(this).css({
            "left": (winW - w) / 2 + "px",
            "z-index": "30"
        });
        var bgdiv = "<div class='bgdiv'></div>";
        $("body").append(bgdiv);
        if (h > winH) {
            $(this).css({
                "display": "block",
                "top": "0px"
            })
        } else {
            $(this).css("display", "block").css({
                top: ((winH - h) / 2 + sctop) + "px"
            });
        }
        $(".bgdiv").css({
            "width": winW + "px",
            "height": tcH + "px",
            "opacity": 0.8,
            "position": "absolute",
            "left": "0",
            "top": "0",
            "z-index": 20,
            "background-color": "#000",
            "display": "block"
        });
    }

使用此方法是可以$("xx").mPop();

类似jq中click（）。

jq中将extend作为扩展模块的方法使用，在原生js中我们也可以使用。这是我们是为了将两个构造函数结合在一起。

<script>
    /*
        把父对象的所有属性，直接复制到自己身上
    */

    function Cat(leg, tail) {
        this.leg = leg;
        this.tail = tail;
        this.climb = function() {
            alert("i can climb!");
        };
    };

    function Tiger(leg, tail, color) {
        this.leg = leg;
        this.color = color;
        this.extend = function(parent){ //复制继承。父对象的属性复制到他自身。原型链继承影响下游所有对象，复制继承不影响下游（jq复制继承）
            for(var key in parent){
                //console.log(key);
                this[key] = parent[key];//循环复制添加给Tiger的this属性
            };
        };
    };


    var tiger = new Tiger(5,1,"#f00");
    console.log(tiger.leg);//5   
    tiger.extend(new Cat(4,1));//重新赋值
    tiger.climb();//i can climb!
    console.log(tiger.leg);//4
    </script>