在 ES6 中，Object.assign 是一个非常实用的方法，可以将一个或多个源对象的属性复制到目标对象中。它的语法如下：
Object.assign(target, ...sources)
其中，target 是目标对象，sources 是一个或多个源对象。它的作用是将源对象的属性复制到目标对象中，并返回目标对象。
例如，我们可以将一个对象的属性复制到另一个对象中：
const obj1 = { foo: 1 }; const obj2 = { bar: 2 }; const obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // { foo: 1, bar: 2 }
在这个例子中，我们创建了两个源对象 obj1 和 obj2，然后使用 Object.assign 将它们的属性复制到一个空对象中，最后得到了一个包含两个对象的属性的新对象 obj3。
但是，Object.assign 的实现并不是那么简单。在这篇文章中，我们将深入探讨 Object.assign 的实现技巧，以及如何在自己的代码中使用它。
实现 Object.assign 的基本思路
Object.assign 的基本思路是将源对象的属性遍历并复制到目标对象中。它的实现可以分为以下几个步骤：
- 首先，创建一个空对象作为目标对象。
- 然后，遍历每个源对象的属性，并将它们复制到目标对象中。如果源对象中有相同的属性，则后面的属性会覆盖前面的属性。
- 最后，返回目标对象。
这个实现思路非常简单，但是在实现过程中有一些技巧需要注意。下面我们将逐步介绍这些技巧。
处理 null 和 undefined 的情况
在实现 Object.assign 的时候，我们需要注意处理 null 和 undefined 的情况。如果我们将一个 null 或 undefined 对象作为源对象传递给 Object.assign，那么它会抛出一个 TypeError 异常。
为了解决这个问题，我们可以使用 Object() 方法将它们转换为对象。例如：
const obj1 = null; const obj2 = { foo: 1 }; const obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // { foo: 1 }
在这个例子中，我们将一个 null 对象作为源对象传递给 Object.assign，但是它并没有抛出异常，而是将 obj2 对象的属性复制到了一个新的对象中。
处理 Symbol 类型的属性
在 ES6 中，新增了一种数据类型 Symbol，它可以用来创建唯一的属性名。如果我们将一个包含 Symbol 类型属性的对象作为源对象传递给 Object.assign，那么它会将这个属性复制到目标对象中。
例如，我们可以将一个包含 Symbol 类型属性的对象复制到另一个对象中：
const obj1 = { [Symbol('foo')]: 1 }; const obj2 = { bar: 2 }; const obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // { bar: 2, [Symbol("foo")]: 1 }
在这个例子中，我们创建了一个包含 Symbol 类型属性的对象 obj1，并将它的属性复制到了一个新的对象 obj3 中。
处理访问器属性
在 JavaScript 中，访问器属性是由 getter 和 setter 方法组成的属性。如果我们将一个包含访问器属性的对象作为源对象传递给 Object.assign，那么它只会将 getter 和 setter 方法复制到目标对象中，而不会将属性值复制到目标对象中。
例如，我们可以将一个包含访问器属性的对象复制到另一个对象中：
-- -------------------- ---- ------- ----- ---- - - --- ----- - ------ -- -- --- ---------- - ------------------- -- -- ----- ---- - - ---- - -- ----- ---- - ----------------- ----- ------ ---------------------- -- - -------- - -- -- -- - ------------------ -- - ---- - -展开代码
在这个例子中，我们创建了一个包含访问器属性的对象 obj1，并将它的属性复制到了一个新的对象 obj3 中。但是，由于访问器属性只有 getter 和 setter 方法，所以 obj3 中并没有 foo 和 bar 属性的值，只有 baz 属性的值被复制到了 obj3 中。
处理继承属性
在 JavaScript 中，对象可以继承属性和方法。如果我们将一个继承了属性和方法的对象作为源对象传递给 Object.assign，那么它会将继承的属性和方法复制到目标对象中。
例如，我们可以将一个继承了属性和方法的对象复制到另一个对象中：
-- -------------------- ---- ------- ----- ------ - ----------------- - --------- - ----- - --------- - ----------------------- - - ----- ------ - --- -------------- ----- ---- - - ---- - -- ----- ---- - ----------------- ------- ------ ------------------ -- - ---- -- ----- ----- - --------------- -- -- -----展开代码
在这个例子中，我们创建了一个 Person 类，并使用 new 运算符创建了一个 person 对象。然后，我们将它的属性复制到了一个新的对象 obj3 中，并调用 obj3 的 sayName 方法输出了它的名字。
使用 Object.assign 实现深拷贝
在 JavaScript 中，对象是引用类型。如果我们将一个对象赋值给另一个变量，那么它们实际上是指向同一个对象的引用。如果我们修改了其中一个对象，那么另一个对象也会受到影响。
为了解决这个问题，我们可以使用 Object.assign 实现深拷贝。深拷贝是一种将一个对象的所有属性复制到另一个对象中，而且它们是完全独立的操作。也就是说，如果我们修改了其中一个对象，另一个对象不会受到影响。
例如，我们可以使用 Object.assign 实现深拷贝：
const obj1 = { foo: { bar: 1 } }; const obj2 = Object.assign({}, obj1); obj2.foo.bar = 2; console.log(obj1.foo.bar); // 1 console.log(obj2.foo.bar); // 2
在这个例子中，我们创建了一个包含一个嵌套对象的对象 obj1，然后使用 Object.assign 实现深拷贝，并将它的属性复制到了一个新的对象 obj2 中。然后，我们修改了 obj2 中的嵌套对象的属性值，并输出了 obj1 和 obj2 中的属性值，可以看到它们是完全独立的操作。
总结
在本文中，我们深入探讨了 ES6 中 Object.assign 的实现技巧。我们介绍了它的基本思路、处理 null 和 undefined 的情况、处理 Symbol 类型的属性、处理访问器属性、处理继承属性等技巧，以及如何使用它实现深拷贝。希望这篇文章能够帮助你更好地理解 Object.assign，并在自己的代码中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d553d8add4f0e0ffd11640
