JS深层继承

我们在书写JS的时候常常被一种现象困扰

let jsonA = {
　　a1: {
　　　　b1:1;
　　},
};
let jsonB = jsonA;
jsonB.a1.b1 = 2;
console.log(jsonA.a1.b1) // 此时输出2；

又或者　

let jsonA = {
　　a1: {
　　　　b1: 1
　　}
};
let jsonB = {
　　a1: {
　　　　c1: 1
　　}
};
let jsonC = Object.assign(jsonA, jsonB);
console.log(JSON.stringify(jsonC)); // 输出 {"a1":{"c1":1}}

啦啦啦，b1不见了！

这是因为引用类型的关系，值类型和引用类型的区别请自行查询，这里就不赘述了。

那要如何解决呢？

一、实现深层拷贝

/**
 * 实现json对象的深层拷贝
 * @parent 需要拷贝的原对象
 * @child  返回的拷贝完成的对象(参数可省略)
 */
function copyDeeply (parent, child) {
  child = child || {};
  for (var prop in parent) {
    // 如果属性本身,就是一个数组或者Json对象,进行深拷贝
    if (typeof parent[prop] === 'object') {
      // 确定子对象的属性类型,[]或者{}对象
      child[prop] = (parent[prop].constructor === Array) ? [] : {};
      // 实现深拷贝
      copyDeeply(parent[prop], child[prop]);
    } else {
      child[prop] = parent[prop];
    }
  }
  return child;
}

二、实现深层继承

/**
 * 实现json对象的深层继承
 * @parent 被继承原对象
 * @child  继承对象(把child对象继承到parent)
 * @result  最终生成的结果对象(参数可省略)
 */
function extendDeeply (parent, child, result) {
  result = result || copyDeeply(parent);
  for (var prop in child) {
    // 如果属性本身,就是一个数组或者Json对象,进行深拷贝
    if (child[prop].constructor === Object) {
      result[prop] = result[prop] || {};
      // 实现深拷贝
      extendDeeply(parent[prop], child[prop], result[prop]);
    } else {
      result[prop] = child[prop];
    }
  }
  return result;
}

这样就可以解决上面所述的问题了

 

 本文章持续更新中。。。