jQuery.extend()中,第一个参数可以添加一个布尔值,表示是否深层拷贝,默认是false.但如果设置为true,则表示深层拷贝.
下面来看看什么是深层拷贝:
1 <script type="text/javascript"> 2 //深层拷贝,第二个对象中的love属性,将会和第一个对象中的love属性合并,遇到相同的属性,后者覆盖前者 3 var resultTrue = $.extend(true,{}, 4 {name:'jyh',job:'web-front-end',love:{bunny:'tewale',cat:'mimi'}}, 5 {age:'18',love:{dog:'wangwang',cat:'mi'} 6 }); 7 //得到的结果将love对象合并,cat:'mi'覆盖cat:'mimi' 8 console.log(resultTrue); 9 //浅拷贝,false不写也可以,默认就是false; 10 var resultFalse = $.extend(false,{}, 11 {name:'jyh',job:'web-front-end',love:{bunny:'tewale',cat:'mimi'}}, 12 {age:'18',love:{dog:'wangwang',cat:'mi'} 13 }); 14 //得到的结果,第二个对象的love属性完全取代第一个对象的love属性 15 console.log(resultFalse); 16 </script>
得到的结果如下:
还有另外很重要的一点,浅拷贝时,假如a对象的属性值love是一个对象{...},拷贝到b对象以后,b对象的love属性值和a对象的love属性值,指向的是同一个{...}对象,如果修改a对象的love属性值{...},b对象的love属性值{...}也会随之变化,但如果是深拷贝,两者是完全独立的.互不影响.
补充深拷贝和浅拷贝的js原生代码:
Object.prototype.clone = function(ifDeep){ var oNew = this.constructor ===Array ? [] : {}; for(var i in this){ oNew[i] = ifDeep ? typeof this[i] === 'object' ? this[i].clone() : this[i] : this[i] } return oNew };
var obj = {name:'code_bunny',love:{dog:'wangwang',cat:'miaomiao'}}; var objCopy1 = obj.clone(true); var objCopy2 = obj.clone(false); console.log(objCopy1); console.log(objCopy2); obj.love.dog = "wang"; console.log(objCopy1); console.log(objCopy2);
可以看到, objCopy1是深拷贝,objCopy1是浅拷贝,所以,在修改obj.love.dog以后, objCopy1没有发生变化,而objCopy2的love属性的dog属性会被修改.