javascript之Object.assign()的痛點分析

const defaultOpt = {
    key1: xxx,
    key2: {
        dd: ee
    },
    .....
};
// deepCopy為某個實現深拷貝的方法
const opt1 = deepCopy(defaultOpt);
opt1.....
const opt2 = deepCopy(defaultOpt);
opt2.....

// 淺拷貝
const a = {t: 1, p: 'gg'};
const b = a;
b.t = 3;
console.log(a); // {t: 3, p: 'gg'}
console.log(b); // {t: 3, p: 'gg'}
//深拷貝
const c = {t: 1, p: 'gg'};
const d = deepCopy(c);
d.t = 3;
console.log(c); // {t: 1, p: 'gg'}
console.log(d); // {t: 3, p: 'gg'}

// Cloning an object
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

// Merging objects
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.

const defaultOpt = {
    title: 'hello', 
    name: 'oo', 
    type: 'line'
};
// 原來可能需要這樣
const opt1 = deepCopy(a);
opt1.title = 'opt1';
opt1.type = 'bar';
opt1.extra = 'extra'; // 額外增加配置
// 現在隻要這樣
const opt2 = Object.assign({}, a, {
    title: 'opt2', 
    type: 'bar', 
    extra: 'extra'
});

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    }
};
const opt = Object.assign({}, defaultOpt, {
    title: {
        subtext: 'Yes, your world.'
    }
});
console.log(opt);
// 預期結果
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}
// 實際結果
{
    title: {
        subtext: 'Yes, your world.'
    }
}

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    }
};
const opt = Object.assign({}, defaultOpt);
opt.title.subtext = 'Yes, your world.';
console.log(opt);
// 結果正常
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    } 
};
const opt1 = Object.assign({}, defaultOpt);
const opt2 = Object.assign({}, defaultOpt);
opt2.title.subtext = 'Yes, your world.';
console.log('opt1:');
console.log(opt1);
console.log('opt2:');
console.log(opt2);
// 結果
opt1:
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}
opt2:
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}

if (!Object.assign) {
    // 定義assign方法
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) { // assign方法的第一個參數
      'use strict';
      // 第一個參數為空，則拋錯
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }
      var to = Object(target);
      // 遍歷剩餘所有參數
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        // 參數為空，則跳過，繼續下一個
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);
        // 獲取改參數的所有key值，並遍歷
        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          // 如果不為空且可枚舉，則直接淺拷貝賦值
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

const obj1 = JSON.parse(JSON.stringify(obj));

    const obj1  = {name:'小明', age:'18',education:'undergraduate'}
    const obj2 = {height:'180cm',hobby:'painting'}
    let  obj = Object.assign({},obj1, obj2)
    console.log('合並後的類：');
    console.log(JSON.stringify(obj));
    Object.assign(obj, obj, {height:'170cm'});
    console.log('修改過height後的類：');
    console.log(JSON.stringify(obj));
    Object.assign(obj, {arr:{index:1, name:'類'}}, {name:'加瞭一個類進去'})
    console.log(JSON.stringify(obj));
    console.log("加一個類進去後："+obj.arr.index);
    // a. 這種修改方式，隻會修改index 的值
    Object.assign(obj, Object.assign(obj.arr, {index:2}))
    console.log(JSON.stringify(obj));
    console.log("修改類index後："+obj.arr.index);
    // b. 這種修改方式，arr隻剩下index屬性
    // Object.assign(obj, {arr:{index:2}}, {name:'修改類的index為：2'})
    // console.log(JSON.stringify(obj));
    // console.log("修改類index後："+obj.arr.index);
    // Object.assign()做的是淺拷貝， 如果一個屬性是新合並進來的對象，改變源對象的值，會影響合並後的值 。
    let newObj  = {type:{aa:'蔬菜'}};
    Object.assign(obj, newObj);
    console.log("合並一個含屬性type的類後："+JSON.stringify(obj));
    // c. 這種不會影響obj中的type.aa
    // Object.assign(newObj, {type:{aa:'水果'}});
    // d. 這種會影響obj中的type.aa
    newObj.type.aa = '水果';
    console.log("修改newObj中的type.aa後："+JSON.stringify(newObj));
    console.log("修改newObj中的type.aa後："+JSON.stringify(obj));
    // e. 用Object.assign合並一個數組的時候，會把數組當成一個屬性名為index的類
    const arr1  = [1, 2, 3, 4, 5] ;  // 在Object的眼裡是這樣的： arr1={0:1, 1：2， 2：3，3：4， 4：5}
    const arr2 =  [8, 9, 10];        // 在Object的眼裡是這樣的： arr2={0:8, 1:9, 2:10}
    console.log("合並後的數組為："+Object.assign(arr1, arr2)); // 得到的結果是：8, 9, 10, 4, 5
    // f. Object.assign() 為類添加方法
    Object.assign(UserInfo.prototype, {
      getUserName (){
        return this.name;
      },
      getUserGender (){
        return this.gender ;
      }
    })
    let user  = new UserInfo("笑笑", '女');
    console.log("userinfo中的信息為： "+ user.getUserName() +", "+user.getUserGender()); // 輸出的結果為：笑笑，女