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;
 }

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

本文章持续更新中。。。