js深克隆和浅克隆同时存在引发的问题？

Question

js深克隆和浅克隆同时存在引发的问题？

学习object.assign写的demo， 下面现象一直不得其解

相关代码

const target = {
  a: 1,
  b: 2
};

const source = {
  c: {
    deep: false
  },
  d: [1,2,3]
};

let cloneObject = Object.assign(target, source); // or {...source}

// deep clone method
let deepObject = Object.assign(target, JSON.parse(JSON.stringify(source)));

source.c.deep = true;
source.d[0] = 4;

console.log(cloneObject);
console.log(deepObject);

浅克隆和深克隆单独执行，结果都正常，一起执行的话，输出如下：

期待浅克隆输出true， 深克隆输出false， 期待给出你的答案

Answer 1

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

所以 let deepObject = Object.assign(target, JSON.parse(JSON.stringify(source))) 会把 target 值改变了，target.c 的指向也会跟着改变，不再指向 source.c 。

Answer 2

const target = {

        a: 1,
        b: 2
    };

    const source = {
        c: {
            deep: false
        },
        d: [1,2,3]
    };

    let cloneObject = Object.assign({},target, source); // or {...source}

    // deep clone method
    let deepObject = Object.assign({},target, JSON.parse(JSON.stringify(source)));

    source.c.deep = true;
    source.d[0] = 4;

    console.log(cloneObject);
    console.log(deepObject);

Answer 3

因为 Object.assign{target, source} 第一个参数为目标对象，会改变对象中的值的。

因此第二次执行 Object.assign 其实是朝同一个 target 上拷贝。

不信你试试执行一下：

console.log(cloneObject === deepObject);

看一下是不是返回的 true。

Answer 4

Object.assign()会改变第一个参数传入的对象，所以在合并的时候，第一个参数最好传入一个空对象。