深拷贝的实现方式

最新推荐文章于 2025-05-17 10:27:17 发布

BYPLUS

最新推荐文章于 2025-05-17 10:27:17 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/BYPLUS/article/details/107093151

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了三种JavaScript中实现深度拷贝的方法：通过JSON对象的stringify和parse方法，递归复制源对象到目标对象，以及使用数组的forEach和ECMAScript 5的Object.*函数。其中，JSON方法不适用于包含DOM对象或某些特定类型的对象，递归复制方法可能产生功能性错误，而第三种方案在处理特定类型的值时也会遇到问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案一：利用现代浏览器支持的JSON对象做一次中转，实现深度克隆。（IE6、IE7不支持原生JSON对象,可载入json2.js补丁来达到兼容）感谢rekey提供此方案。JSON.stringify()与JSON.parse()详细信息请点击这里

var deepClone = function (obj) {
    var _tmp,result;
    _tmp = JSON.stringify(obj);
    result = JSON.parse(_tmp);
    return result;
}
var obj1 = {family:{brother:"wangzhipeng",father:"wanglicai",mother:"sunaiyun"},name:"gino",sex:"male",age:"27"};
var obj2 = deepClone(obj1);
obj1.family.brother = "close";
console.log(obj1); 
console.log(obj2);

方案二：确定参数类型为object （这里仅指object literal、Array literal）后，复制源对象的键/值到目标对象，否则直接返回源对象。

注：下面这个函数只能说基本满足生产需求，如果参数是Dom对象、new Object ()的话,就会产生功能性错误，要兼容参数的所有数据类型，请点击这里

var deepClone = function fnDeepClone(obj){
    var result = typeof obj.splice === 'function'?[]:{},
    key;
    if (obj && typeof obj === 'object'){
        for (key in obj ){
            if (obj[key] && typeof obj[key] === 'object'){
                result[key] = fnDeepClone(obj[key]);//如果对象的属性值为object的时候，递归调用deepClone，即再把某个值对象复制一份到新的对象的对应值中
            }else{
                result[key] = obj[key];//如果对象的属性值不为object的时候，直接复制参数对象的每一个键/值到新对象对应的键/值中
            }
            
        }
        return result;
    }
    return obj;
    

}

//test array
var arry1= ["a","b","c","d"];
var arry2 = deepClone(arry1);
arry1.pop();
console.log(arry1);
console.log(arry2);

//test object
var obj1 = {name:"gino",sex:"male",age:27,favorite:"pingpang",family:{brother:"zhipeng",mother:"SunAiyun",father:"WangLicai"}};
var obj2 = deepClone(obj1);
obj1.family.brother = "close";
console.log(obj1);
console.log(obj2);

方案三：利用数组的Array.prototype.forEach和其他一些ECMAScript 5中的Object.*函数。经测试，当值的类型为object的时候，会出现功能错误。个人水平有限，没看懂这个函数，如有朋友能帮忙修正下此函数，万分感激。链接

var deepClone = function (o){
  var copy = Object.create( Object.getPrototypeOf(o) );
  var propNames = Object.getOwnPropertyNames(o);
 
  propNames.forEach(function(name){    
    var desc = Object.getOwnPropertyDescriptor(o, name);   
    Object.defineProperty(copy, name, desc);        
  });
 
  return copy;
}
 
var obj1 = {family:{brother:"wangzhipeng",father:"wanglicai",mother:"sunaiyun"},name:"gino",sex:"male",age:"27"};
var obj2 = deepClone(obj1);
obj1.sex = "close";
console.log(obj1); 
console.log(obj2);