深入解析Object.assign()：为何它不是真正的深拷贝及解决方案

近期在使用JavaScript开发时，常遇到如Echarts等组件需要复杂配置的情况。由于大部分配置项具有通用性，开发者通常希望编写一份基础配置，并在需要时对其进行深拷贝，以便在副本上进行后续修改而不影响原始配置。

具体场景如下所示：

const defaultOpt = {
    key1: xxx,
    key2: {
        dd: ee
    },
    .....
};
// deepCopy为某个实现深拷贝的方法
const opt1 = deepCopy(defaultOpt);
opt1.....
const opt2 = deepCopy(defaultOpt);
opt2.....

深拷贝与浅拷贝的概念辨析

这涉及JavaScript中对象存储的基本原理：对象变量存储的是内存地址。浅拷贝意味着多个变量指向同一块内存区域，修改其中一个会影响另一个；而深拷贝则为新对象开辟独立的内存空间，两者互不干扰。

通过以下实例可以直观看出两者的区别：

// 浅拷贝
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'}

从结果可见，浅拷贝在修改其中一个对象的值时，其他指向同一地址的对象也会随之改变；而深拷贝则能保持数据独立性，互不影响。

Object.assign()方法的应用

为了实现深拷贝需求，我注意到ES6引入了Object.assign()方法，初步判断其可能满足克隆和合并的需求。

参考官方提供的两个典型示例：

// 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.'
    }
}

原本期望该操作仅覆盖subtext属性，但实际上它直接替换了整个title对象。这意味着Object.assign()只处理根属性，对嵌套属性不做深层合并处理。

因此，代码不得不重构为相对繁琐的形式：

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.'
    }
}

结果显示两个配置对象变得完全一致，尽管我们仅修改了opt2的subtext，并未触碰opt1。

这表明：在title这一层级，Object.assign()仅执行了浅拷贝，并未进行深层的深拷贝操作。

这引发了对该接口实现机制的怀疑：它是否如预期那样工作？

查阅官方文档后，发现其提供的Polyfill实现代码（已添加注释）如下：

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

上述代码明确显示，该方法仅对顶层属性进行赋值，并未递归处理下一层属性以实现真正的深拷贝。

小结

Object.assign()仅执行一级属性复制，比单纯的浅拷贝多深了一层而已。使用时需特别注意这一局限性。

附：一种简单的深拷贝实现思路，尽管存在一定限制，如下所示：

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

其核心思路是将对象转换为JSON字符串，再将字符串解析回对象。