最近在复习,发现前端好多知识点牵一发动全身。
比如我想看一下JQuery的extend源码,就不得不再好好看看深克隆浅克隆的问题。 😢😢😢
什么是深克隆?
我们都知道,JavaScript有六种基本的数据类型。
五种基本的数据类型:string,number,undefined,boolean,null
(在内存中表现为一个值,保存在栈中)
一种复杂的数据类型(引用类型):object 【function,array,object】
(在内存中表现为一个指针,保存在堆中)
将一个对象的所有属性均复制,并将该对象与原对象放在内存中不同的位置,此时,改变新对象的属性不会对原对象造成影响,这种行为叫做深克隆。
我们还是先看浅克隆吧。。。
var people= {
name:"sun",
age:24,
hobby:["eat","shopping"],
son:{
age:3
}
}
//此处为浅克隆
function extendClone(oldObj) {
var newObj = {};
for(var i in oldObj){
newObj[i] = oldObj[i];
}
return newObj;
}
console.log(people);
var people1 = extendClone(people);
people1.name = "刘某某";
people1.hobby.push("看剧!");
console.log(people1);
var people2 = extendClone(people);
people2.name = "陈某某";
people2.hobby.push("游泳!");
console.log(people2);
看他们的爱好!!.png
浅克隆只是简单的复制对象,若对象其中一个属性是引用值,由于引用型变量保存的是内存的一个地址,所以后来的
hobby
属性,都指向内存中的同一块地址,最后输出的结果同样相同。从上面的例子也可以看出,
name
等原始值的改变,并不会影响原对象中的原始值。
解决克隆引用值问题,还是需要深度克隆的!
for-in循环遍历对象上的所有属性,判断是否为引用值,若是,进行递归,直到所有属性都为原始值为止。
拷贝出来后,就是一个全新对像,就和之前没什么关系了,以前的改变也不能对新的产生影响!!
var people= {
name:"sun",
age:24,
hobby:["eat","shopping"],
son:{
age:3
}
}
function deepClone(oldObj,newObj){
var newObj = newObj||{};
for(var i in oldObj){
if(typeof oldObj[i]==='object'){
newObj[i] = (oldObj[i].constructor === Array) ? [] : {};//保存克隆后的引用值
deepClone(oldObj[i],newObj[i]);
}else {
newObj[i] = oldObj[i];
}
}
return newObj;
}
console.log(people);
var people1 = deepClone(people);
people1.name = "刘某某";
people1.hobby.push("看剧!");
console.log(people1);
var people2 = deepClone(people);
people2.name = "陈某某";
people2.hobby.push("游泳!");
console.log(people2);
看他们的爱好!!.png
一些扩展
-
concat( )和slice( )
slice和concat方法都会返回一个新的数组,但是这两个方法对于数组中的对象却没有执行深复制
此时看起来好像是深度拷贝了,但是我们修改name值。。。var array = [[1,1,1],{name:"syx"},[3,3,3]]; var arrSlice = array.slice(0,2); console.log(array); //[[1,1,1],{name:"syx"},[3,3,3]]; console.log(arrSlice); //[[1,1,1],{name:"syx"}]
很容易看出,此时进行的是浅复制arrSlice[1].name = "SYX"; console.log(array); //[[1,1,1],{name:"SYX"},[3,3,3]]; console.log(arrSlice); //[[1,1,1],{name:"SYX"}]
- jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
类型: Boolean
如果是true,合并成为递归(又叫做深拷贝)默认值为false,表示浅拷贝。
target
类型: Object
对象扩展。这将接收新的属性。
object1
类型: Object
一个对象,它包含额外的属性合并到第一个参数.
objectN
类型: Object
包含额外的属性合并到第一个参数
1.合并两个对象,并修改第一个对象
var a= {
name:"sun",
age:24,
hobby:["eat","shopping"],
son:{
age:3
}
}
var b= {
name:"li",
age:28,
hobby:["游泳","看剧"],
son:{
age:5
}
}
$.extend(a, b);
b覆盖了a的原有属性.png
2.当继承的对象属性中有引用类型的时候,两个对象同时指向一个对象,改变一个另一个也随之改变。如果有相同属性,后边的会覆盖前边的
var a= {
name:"sun",
age:24,
son:{
age:3,
name:"小名"
}
}
var b= {
son:{
hobby:'游泳'
}
}
$.extend(true,a, b);
console.log(a);
b的新属性添加到了a上.png
网友评论