js-克隆(浅克隆 & 深克隆）

最新推荐文章于 2025-05-24 17:39:44 发布

weixin_30729609

最新推荐文章于 2025-05-24 17:39:44 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenyingjie1207/p/10002639.html

本文详细解析了JavaScript中对象的浅克隆与深克隆的区别，通过具体实例展示了两种克隆方式下对象引用的变化，阐述了实现深克隆的具体步骤与方法。

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

js-克隆

浅克隆

浅克隆的对象的引用值是拷贝对象里的引用，这两个对象里面的引用（如对象里的数组或者内嵌对象）指向的地方是一致的。

    var obj = {
      name:"chen",
      age:18,
      gender:"female",
      card:['visa','cb'],
      wife:{
        name:'abc',
        son:{
          name:'hehe'
        }
      }
    };
    var obj1 = {

    };
    
 function clone(origin,target){
      for(var prop in origin){
        if(origin.hasOwnProperty(prop)){
          target[prop] = origin[prop];
        }
      }
      return target;
    }
    clone(obj,obj1);
    obj1.name = 'ge';
    console.log(obj1.name);//ge
    console.log(obj.name);//chen
    obj1.card.push("abc");
    console.log(obj.card);//['visa','cb','abc'];因为浅克隆的对象的引用值是拷贝对象里的引用，这两个对象的card指向的地方是一致的。

深克隆

这两个对象里的引用的独立拷贝的，不指向同一个地方。
深克隆

思路方法：

遍历对象
判断是不是原始值 typeof() object, instanceof, toString(推荐）, constructor
判断是数组还是对象
建立相应的数组或对象
递归

function deepClone(origin, target){
    var target = target || {};
    var toStr = Object.prototype.toString;
    var arrStr = '[object Array]';
    for (var prop in origin){
      if(origin.hasOwnProperty(prop)){
        if(origin[prop] !== null && typeof(origin[prop]) == 'object'){
          // if(toStr.call(origin[prop]) == arrStr){
          //   target[prop] = [];
          // }else{
          //   target[prop] = {};
          // }
          target[prop] = (toStr.call(origin[prop])==arrStr) ? [] : {};
          deepClone(origin[prop],target[prop]);
        }else{
          target[prop] = origin[prop];
        }
      }
    }
    return target;
  }
  deepClone(obj,obj1);
  obj1.card.push("abc");
  console.log(obj.card);//['visa','cb']；这两个对象里的引用的独立拷贝的，不指向同一个地方。

转载于:https://www.cnblogs.com/chenyingjie1207/p/10002639.html