ES7 之 Object.assign 方法详解

在 JavaScript 中，常常需要将一个对象的属性复制到另一个对象中。在 ES6 中，提供了简便的方法来实现该功能，即 Object.assign() 方法。在 ES7 中，Object.assign() 方法得到了进一步的增强，本文将为您详细介绍该方法的使用。

基本用法

Object.assign() 方法用于将一个或多个源对象的可枚举属性复制到目标对象中，返回目标对象。其基本语法为：

Object.assign(target [, source1, source2, …])

其中，target 是目标对象，source1、source2 …是源对象。多个源对象的属性将合并到目标对象中，如果有同名属性，则后面的源对象的属性会覆盖前面的。

下面是一个简单的示例：

let target = {};
let source1 = {x: 1};
let source2 = {y: 2};

Object.assign(target, source1, source2);

console.log(target);  // {x: 1, y: 2}

注意事项

Object.assign() 方法只复制源对象的可枚举属性，也就是说，不会复制其原型链上的属性。此外，它也不会复制 getter 和 setter 方法。如果源对象的属性是一个对象，则会复制该对象的引用，而不是其中的值。如果源对象的属性是一个函数，则会复制该函数的引用。

下面是一个例子：

let obj1 = {
  foo: {x: 1}
};

let obj2 = Object.assign({}, obj1);

console.log(obj1.foo === obj2.foo); // true

用途

Object.assign() 方法的主要用途是对象属性的合并和拷贝。

对象属性合并

当我们需要将多个对象的属性合并成一个对象时，可以使用 Object.assign() 方法。

let obj1 = {x: 1};
let obj2 = {y: 2};
let obj3 = {z: 3};

let obj = Object.assign({}, obj1, obj2, obj3);

console.log(obj); // {x: 1, y: 2, z: 3}

对象属性拷贝

当我们需要将一个对象的属性拷贝到另一个对象中时，可以使用 Object.assign() 方法。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let person1 = new Person('Tom', 20);
let person2 = {};

Object.assign(person2, person1);

console.log(person2); // {name: "Tom", age: 20}

增强用法：深拷贝

在 ES7 中，Object.assign() 方法增加了深拷贝的功能。我们可以使用如下方式进行深拷贝：

Object.assign({}, obj1, obj2, {foo: obj3})

在这个例子中，我们需要将 obj1、obj2 的属性进行合并，并将 obj3 的值作为 foo 属性的值添加到结果对象中。由于 {foo: obj3} 是一个新的对象，因此 Object.assign() 方法将执行深拷贝操作。

下面是一个使用深拷贝的示例：

let obj1 = {x: {y: 1}};
let obj2 = {x: {z: 2}};

let obj = Object.assign({}, obj1, obj2);

console.log(obj); // {x: {z: 2}}

在该示例中，Object.assign() 方法只将 obj2 中的属性合并到结果对象中，而 obj1 中的 x 属性被覆盖了。如果我们想将 obj1 中的 x 属性也合并到结果对象中，可以使用深拷贝的方式：

let obj1 = {x: {y: 1}};
let obj2 = {x: {z: 2}};

let obj = Object.assign({}, obj1, obj2, {x: Object.assign({}, obj1.x, obj2.x)});

console.log(obj); // {x: {y: 1, z: 2}}

总结

Object.assign() 方法是一个非常有用的工具，可以用于对象属性的合并和拷贝。在 ES7 中，它还增加了深拷贝的功能，使其更加灵活。需要注意的是，它只会复制源对象的可枚举属性，不会复制原型链上的属性以及 getter 和 setter 方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f8869add4f0e0ff81d5d8