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"}}