JS实现深度克隆
2017-03-31 本文已影响186人
起这么长的名字根本没有用
一、概念
深度克隆:深度克隆的新对象可以完全脱离原对象，我们对新对象的修改不会反映到原对象中
二、知识点储备:
1. 函数的克隆直接通过普通赋值的方式，就实现了函数的克隆，并且不会影响之前的对象。原因就是函数的克隆会在内存单独开辟一块空间，互不影响。
var Person = function(){
this.name = "dai"
this.friends = ["A","B"]
}
var n = Person
n = function (){
console.log("message");
}
console.log(n)
/*function (){
console.log("message");
}*/
console.log(Person)
/*function(){
this.name = "dai"
this.friends = ["A","B"]
}
*/
2.安全的类型检测:Object.prototype.toString.call(value) [Object NativeConstructor](字符串类型的值)
console.log(Object.prototype.toString.call('dai') );// [object String]
console.log( Object.prototype.toString.call(123) );// [object Number]
console.log( Object.prototype.toString.call({name:"lu"}) );//[object Object]
console.log( Object.prototype.toString.call([1,2]) );// [object Array]
3. 需求:只克隆对象、数组、函数、原始类型值的属性，原型链上继承过来的属性也克隆过来
4.实现深度拷贝的思路:
- 先判断传入值得类型，如果是对象则让最终的返回值是对象类型，同理数组，其他类型的值直接返回就Ok
- 在传入类型是对象或者数组的情况下，遍历传入对象的key,如果key对应的value还是对象或者数组，则递归函数本身(深层遍历)，如果key对应的value是除了对象和数组以外的值则把对应的key和value都给函数最终要返回的结果
- 返回结果
三、代码实现:
var isClass = function (o){
return Object.prototype.toString.call(o).slice(8,-1)
}
var deepClone = (function deepClone(obj){
var result,
oClass = isClass(obj);
if(oClass==='Object'){
result = {}
}else if(oClass==='Array'){
result = []
}else{
return obj
}
if(oClass==='Object'){
for(var key in obj){
result[key] = deepClone(obj[key])
}
}else if(oClass==="Array"){
for(var i=0;i<obj.length;i++){
result.push(deepClone(obj[i]))
}
}
return result
})
var orgin = {
name:{
firstName:"dai",
lastName:"lu"
},
firends:[{name:"A"},{name:"B"}],
age:26
}
var clone = deepClone(orgin);
console.log(clone);
clone.firends.push({name:"C"})
console.log(orgin.firends);
