js对象克隆和继承问题

Question

想要实现方便的对象继承，如下代码:

let obj = { //obj是一个json对象，存在多层嵌套，但不会存在函数
  'a': 1,
  'b': 2,
  'd': {
    'd': 4
  }
}

let obj1 = newObj(obj); //此处obj1继承obj
obj1.a = 3; //改变obj1，不改变obj
obj.c = 4; //改变obj，同时obj1发生改变
obj1.d.d = 6; //改变obj1，不改变obj,此时obj.d.d=4
obj.d.d = 5; //此时obj1.d.d=6,如果没有上一行"obj1.d.d = 6;"，则obj1.d.d=5

newObj()是本次提问的解决方法 希望大佬能给个解决方案或者思路

尝试过的思路：
（放弃）原始的prototype继承：obj的属性名和长度未知，写法太麻烦，可能是我思路不对
（失败）obj1深度克隆obj：obj1与obj完全独立，obj1没法随着obj更新；
（失败）obj1先深度克隆然后开一个字段用来直接引用obj：引用的部分公用了地址，obj1会影响obj

Answer 1

原型链其实就是一种特殊的setter/getter，get原型的，set自己的。所以正适合做这种单向改变。

这是一个反模式，不要常用这种hack！正常代码只应该在原型链上存函数！

如果你不知道自己在做什么，就不要往这个方向想。想不出坏东西是件好事。

function deepPrototypeClone(obj) {
    const ret = Object.create(obj);
    for (const [key, value] of Object.entries(obj)) {
        if (value && typeof value === 'object') {
            ret[key] = deepPrototypeClone(value);
        }
    }
    return ret;
}

验证：

let obj1 = deepPrototypeClone(obj);

obj1.a = 3;
console.log(`prototype: ${obj.a}, clone: ${obj1.a}`);
// prototype: 1, clone: 3

obj.c = 4;
console.log(`prototype: ${obj.c}, clone: ${obj1.c}`);
// prototype: 4, clone: 4

obj1.d.d = 6;
console.log(`prototype: ${obj.d.d}, clone: ${obj1.d.d}`);
// prototype: 4, clone: 6

obj.d.d = 5;
console.log(`prototype: ${obj.d.d}, clone: ${obj1.d.d}`);
// prototype: 5, clone: 6

最后，这个需求其实很奇怪。我的建议是先想方设法避开这种奇怪的需求，实在不行再用这种维护的时候会爆炸的代码。

常在河边走，哪有不湿鞋。

Answer 2

题目描述可以再完整一点:
如果obj.c.d修改，obj1要怎么变？
如果obj修改了某个属性，obj1再修改了这个同名属性，然后obj再次修改这个属性，那么obj1的对应属性怎么变？

不过总体上这种单向改变的要用setter/getter配合闭包来实现

===================

obj1.d.d = 6; //改变obj1，不改变obj,此时obj.d.d=4
obj.d.d = 5; //此时obj1.d.d=6,如果没有上一行"obj1.d.d = 6;"，则obj1.d.d=5

这里的规则是不是不合理？如果obj的值永远会覆盖obj1的值，那么无论之前是否修改了obj1.1.1最后obj1.d.d都应该为5；如果obj的值不会覆盖obj1的值，那么这里应该取4；按你的规则，是只允许obj1.d.d修改一次，有点不符合常理。

所以我就按obj二级属性不会覆盖obj1二级属性来写的:

const isPlainObj = value => typeof value === 'object' && value !== null

const newObj = (originalObj, effectByOriginal = true) => {
  const result = {}
  
  const entries = Object.entries(originalObj)
  const override = entries.reduce((total, [key, value]) => {
    total[key] = { valueBeforeOverride: value, isOverride: false };
    return total
  }, {})

  Object.entries(originalObj).forEach(([key, value]) => {
    let actualValue = isPlainObj(value) ? newObj(value, false) : value;
    Object.defineProperty(result, key, {
      get: function () {
        const { valueBeforeOverride, isOverride } = override[key]
        const objValue = originalObj[key]
        
        if (!isOverride) return actualValue
        if (valueBeforeOverride === objValue || !effectByOriginal) return actualValue

        override[key] = {
          isOverride: false,
          valueBeforeOverride: objValue
        }
        return objValue

      },
      set: function (newValue) {
        override[key].isOverride = true;
        actualValue = newValue;
      }
    })
  })

  return result
}

Answer 3

理清思路
obj用于继承，结构是一个json对象，存在多层嵌套，但不会存在函数；
obj1继承obj，可能会重新赋值，赋值后的字段永远优先于obj，若无该字段无重新赋值，则随obj改变而更新；
obj0用于存放obj需要重写的字段；

let obj0 = {
//  'b': 33,
//  'd':{'d':88},
  'f': [4,5,6],
  'g':[{
    'g0': 7,
    'g1': 7,
  }]
};

function deepPrototypeClone(obj) { //继承obj
  const ret = Object.create(obj);
  for (const [key, value] of Object.entries(obj)) {
    if (value && typeof value === 'object') {
      ret[key] = deepPrototypeClone(value);
    }
  }
  return ret;
}
    
function updateObj(obj0,obj){ //obj更新obj0中的数据
  for (const [key, value] of Object.entries(obj0)) {
    if(value && value instanceof Array){
      if(typeof value[0] === 'object'){
        for(let i=0; i<value.length; i++){
          updateObj(value[i],obj[key][i]);
        } 
      }else{
        obj[key].splice(0,obj[key].length,...value) ;
      }
    }else{           
      obj[key] = value;
    }
  }
};

let obj1 = deepPrototypeClone(obj); //obj1继承obj
//obj1.b = 22;
//obj1.d.d = 99;
//obj1.f = [5,5,5];
//obj1.g[0].g0 = '8';
//obj1.h = [['7','5']];
updateObj(obj0,obj); //obj调整,obj1随之更新
console.log("obj");
console.log(obj.b); console.log(obj.d.d); 
console.log(obj.f); console.log(obj.g[0]); console.log(obj.h[0]);
console.log("obj1");
console.log(obj1.b); console.log(obj1.d.d); 
console.log(obj1.f); console.log(obj1.g[0]); console.log(obj1.h[0]);