jQuery.extend 方法学习小记

想必写过jQuery的童鞋都知道$.extend()和$.fn.extend()这两个方法，今天我们先看看它的对象拷贝作用，并做一些测试来验证。

---

1、 $. extend(dest,src1)    dest是空对象

var aa={};

var bb={

        qqq:[1,2,3,4],

        www:[1,2],

        eee:[

            {name:3,value:3},

            {name:2,value:2},

            {name:3,value:3},

            {name:2,value:2}],

        rrr:[

            {

                points:[100,60,30,50],

                fillColor:"rgba(0, 255, 0, 0.3)",

                comment:"备注1"

            },

            {

                points:[80,80,30,50],

                fillColor:"rgba(255, 0, 0, 0.3)",

                comment:"备注2"

            }]

};

var obj=$.extend(aa,bb);  //以bb为准，bb与aa共有的属性原则：bb完全覆盖aa

在extend(dest,src1,src2,...,srcN)方法中，越后面融合进来的对象所有的有优先级就高，它所有的属性也会覆盖掉前面对象相对应的属性。

2、 $.extend(dest,src1)    dest是有属性对象

var aa={

            name:"aa",

            value:65,

            qqq:[1,2,3],

            www:[1,2,3],

            eee:[

                {name:1,value:1},

                {name:2,value:2},

                {name:3,value:3}

            ],

            rrr:[]

};

var bb={

            qqq:[1,2,3,4],

            www:[1,2],

            eee:[

                {name:3,value:3},

                {name:2,value:2},

                {name:3,value:3},

                {name:2,value:2}],

            rrr:[

            {

                points:[100,60,30,50],

                fillColor:"rgba(0, 255, 0, 0.3)",

                comment:"备注1"

            },

            {

                points:[80,80,30,50],

                fillColor:"rgba(255, 0, 0, 0.3)",

                comment:"备注2"

            }]

  };

var obj=$.extend(aa,bb);  //以bb为准，bb与aa共有的属性原则：bb完全覆盖aa

3、 还有一个重载原型 ：$.extend(true,dest,src1)   第一个参数为true，表示需要深度拷贝

警告:不支持第一个参数传递 false 。

var aa={

            name:"aa",

            value:65,

            qqq:[1,2,3],

            www:[1,2,3],

            eee:[

                {name:1,value:1},

                {name:2,value:2},

                {name:3,value:3}

            ]

};

var bb={

            qqq:[5,6,7,8],

            www:[5,6],

            eee:[

                {name:5,value:5},

                {name:6,value:6}

            ]

};

var obj=$.extend(true,aa,bb);

结果：

 

 

 

看到最终结果，可以发现，所谓深度拷贝，就是遍历的去找两个对象之间的属性值的差别，就是不停地一层一层的去覆盖，可以说是获得了aa和bb的并集，但是aa与bb的交集由bb的属性来覆盖。

再来两个简单的例子：

var obj1=$.extend(true,

{name:"a",sex:"male",position:{province:"guangdong",city:"shenzhen",village:"futian"}},

{name:"b",position:{province:"guangxi",city:"guiling"}})

结果：

obj1 = {name:"b",sex:"male",position:{province:"guangxi",city:"guiling",village:"futian"}}

 

var obj2=$.extend(

{name:"a",sex:"male",position:{province:"guangdong",city:"shenzhen",village:"futian"}},{name:"b",position:{province:"guangxi",city:"guiling"}})

结果：

obj2 = {name:"b",sex:"male",position:{province:"guangxi",city:"guiling",village:"futian"}}