js對象克隆和繼承問題

理清思路
obj用于繼承，結(jié)構(gòu)是一個(gè)json對象，存在多層嵌套，但不會存在函數(shù)；
obj1繼承obj，可能會重新賦值，賦值后的字段永遠(yuǎn)優(yōu)先于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中的數(shù)據(jù)
  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調(diào)整,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]);

原型鏈其實(shí)就是一種特殊的setter/getter，get原型的，set自己的。所以正適合做這種單向改變。

這是一個(gè)反模式，不要常用這種hack！正常代碼只應(yīng)該在原型鏈上存函數(shù)！

如果你不知道自己在做什么，就不要往這個(gè)方向想。想不出壞東西是件好事。

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

驗(yàn)證：

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

最后，這個(gè)需求其實(shí)很奇怪。我的建議是先想方設(shè)法避開這種奇怪的需求，實(shí)在不行再用這種維護(hù)的時(shí)候會爆炸的代碼。

常在河邊走，哪有不濕鞋。

題目描述可以再完整一點(diǎn):
如果obj.c.d修改，obj1要怎么變？
如果obj修改了某個(gè)屬性，obj1再修改了這個(gè)同名屬性，然后obj再次修改這個(gè)屬性，那么obj1的對應(yīng)屬性怎么變？

不過總體上這種單向改變的要用setter/getter配合閉包來實(shí)現(xiàn)

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

obj1.d.d = 6; //改變obj1，不改變obj,此時(shí)obj.d.d=4
obj.d.d = 5; //此時(shí)obj1.d.d=6,如果沒有上一行"obj1.d.d = 6;"，則obj1.d.d=5

這里的規(guī)則是不是不合理？如果obj的值永遠(yuǎn)會覆蓋obj1的值，那么無論之前是否修改了obj1.1.1最后obj1.d.d都應(yīng)該為5；如果obj的值不會覆蓋obj1的值，那么這里應(yīng)該取4；按你的規(guī)則，是只允許obj1.d.d修改一次，有點(diǎn)不符合常理。

所以我就按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
}