測試javascript複製object的行為

object.js

    // ref:
    // https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
    // https://medium.com/@jobboy0101/js%E5%9F%BA%E7%A4%8E-primitive-type-v-s-object-types-f88f7c16f225

    let a = {
      pro1: 'aaa',
      pro2: {
        pro22: 'aaaa'
      }
    };

    // 淺層複製
    let b = {...a}

    b.pro1 = 'bbb';
    b.pro2.pro22 = 'bbbb';
    
    console.log(a); // { pro1: 'aaa', pro2: { pro22: 'bbbb' }}
    console.log(b); // { pro1: 'bbb', pro2: { pro22: 'bbbb' }}

    // 淺層複製
    let c = Object.assign({}, a);

    c.pro1 = 'ccc';
    c.pro2.pro22 = 'cccc';
    
    console.log(a); // { pro1: 'aaa', pro2: { pro22: 'cccc' }}
    console.log(c); // { pro1: 'ccc', pro2: { pro22: 'cccc' }}

    // 深層複製
    let d = JSON.parse(JSON.stringify(a));

    d.pro1 = 'ddd';
    d.pro2.pro22 = 'dddd';

    console.log(a); // { pro1: 'aaa', pro2: { pro22: 'cccc' }}
    console.log(d); // { pro1: 'ddd', pro2: { pro22: 'dddd' }}

    // e 和 a 指向到同一塊實體記憶體, e的操作會連帶影響到a
    let e = a;

    e.pro1 = 'eee';
    e.pro2.pro22 = 'eeee';

    console.log(a); // { pro1: 'eee', pro2: { pro22: 'eeee' }}
    console.log(e); // { pro1: 'eee', pro2: { pro22: 'eeee' }}