一种在JS中实现对象深度克隆的方法

前 言

面试中经常被问到JS中的深度克隆, 在写代码中也会用到对象的深度克隆这个需求.

故将我能想到的方法都整理出来, 供大家参考.

请大家不啬赐教.

现有一个源对象 sourceObj 供拷贝, 如下:

const sourceObj = {
  name: 'Alex',
  house: ["深圳湾一号", "江南别野"],
  more: {
    money: "1000000000000",
    carCount: "5",
    bank: {
      bank1: "中国工商银行",
      bank2: "中国银行",
      sayHi2: function () {
        alert("我是sayHi2函数")
      },
      bank3: {
        name1: "浦发银行",
        name2: "兴业银行"
      }
    }
  },
  sayHi: function (op) {
    alert(op + ": " + "你好, 我是 " + this.name)
    console.log(this)  // 打印一下对象本身
  }
}

方法一: 使用递归遍历对象的属性

该函数传入source对象, 返回一个clone后的新对象

function deepClone(origin, target) {
  //target是否存在如果不存在创建空对象
  let tar = target || {},
    //判断是否为引用数据类型
    toStr = Object.prototype.toString,
    arrType = '[object Array]';
  for (let key in origin) {
    //剥离原型链的数据
    if (origin.hasOwnProperty(key)) {
      //判断是否为引用数据类型 对象或数组
      if (typeof (origin[key]) === 'object' && origin[key] !== null) {
        if (toStr.call(origin[key]) === arrType) {
          tar[key] = [];
        } else {
          tar[key] = {};
        }
        deepClone(origin[key], tar[key]);
      } else {
        tar[key] = origin[key];
      }
    }
  }
  return tar;
}

现在将递归函数进行校验

console.log("克隆后的新对象为", deepClone(sourceObj))
deepClone(sourceObj).more.bank.sayHi2()  // "我是sayHi2函数"

[完]