ES5深拷贝函数封装

同系列文章请查看：Github：pre-interview

简述JavaScript深拷贝与浅拷贝

假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

前置知识：JavaScript基本数据类型与复杂（引用）数据类型。

var obj = {
  name: 'yesmore',
  age: 18,
  info: {
    hobby: ['travel', 'piano', {
      a: 1
    }],
    career: {
      teacher: 4,
      engineer: 9
    }
  }
};

function deepClone(origin, target) {
  var tar = target || {}
  var toStr = Object.prototype.toString
  var arrType = '[object Array]'

  for (var k in origin) {
    if (origin.hasOwnProperty(k)) { // 判断是否为org自己的属性
      if (typeof origin[k] === 'object' && origin[k] !== null) {
        tar[k] = toStr.call(origin[k]) === arrType ? [] : {} // 判断是数组还是对象
        deepClone(origin[k], tar[k])
      } else {
        // 非object类型则直接赋值
        tar[k] = origin[k]
      }
    }
  }
  return tar
}

const newObj = deepClone(obj, {})
newObj.info.hobby[2].a = 123
console.log(obj, newObj);

// var type = Object.prototype.toString.call([]) // [object Array]
// var type = Object.prototype.toString.call({}) // [object Object]
// console.log(type);

// console.log(typeof obj['info']); // ''

Tips: Please indicate the source and original author when reprinting or quoting this article.

ES5深拷贝函数封装

ES5深拷贝函数封装

简述JavaScript深拷贝与浅拷贝

特色标签

链友