深入理解 JavaScript 中的 Object.assign() 方法

一回想起用 Object.assign() 扩展数组，那会儿真是恍如隔世。 感觉自己就像没学过一样，虽然大概知道这玩意儿干啥的，但细节全都模糊不清了。 得赶紧补课。 Object.assign() 就是 Javascript 里能把至少一个源对象的所有可枚举自有属性全都搬到目标对象里去的一个简便方法。最后它也会把改好的目标对象还给我们。

Object.assign() 是 JavaScript 中的一个方法，用于将一个或多个源对象的所有可枚举自有属性的值复制到目标对象中。它返回修改后的目标对象。

语法

Object.assign(target, ...sources)

target：目标对象，要将属性复制到的对象。

sources：一个或多个源对象，它们的属性将被复制到目标对象。如果有多个源对象，则它们的属性将依次复制到目标对象。如果某个源对象与目标对象具有相同的属性，则后面的源对象的属性将覆盖前面的源对象的属性，最终在目标对象中仅保留一个属性。

应用场景

对象合并：将多个对象的属性合并到一个目标对象中。

举个例子: 将 source1 和 source2 的属性复制到了 target 对象中。

如果属性名相同，则后面的源对象的属性值会覆盖前面的源对象的属性值。

const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { d: 6 };

Object.assign(target, source1, source2);

console.log(target); // { a: 1, b: 4, c: 5, d: 6 }

### 对象克隆 ：将一个对象的属性复制到一个新对象中，实现对象的浅拷贝。

const obj = { a: 1, b: 2 };
const clone = Object.assign({}, obj);

console.log(clone); // { a: 1, b: 2 }

默认参数：用于设置函数参数的默认值。

function myFunction(options) {
  const defaultOptions = {
    option1: 'default',
    option2: 'default'
  };

  options = Object.assign({}, defaultOptions, options);

  // 使用 options 进行后续操作
}

myFunction({ option2: 'custom' });

混入（Mixin）模式：将一个或多个对象的方法和属性混入到另一个对象中，实现代码复用。

const mixin = {
  method1() {
    console.log('method1');
  },
  method2() {
    console.log('method2');
  }
};

class MyClass {}

Object.assign(MyClass.prototype, mixin);

const obj = new MyClass();
obj.method1(); // 'method1'

覆盖默认配置：将默认配置与用户提供的配置合并以生成最终的配置对象。

const defaultConfig = {
  option1: 'default',
  option2: 'default'
};

function initialize(config) {
  config = Object.assign({}, defaultConfig, config);
  // 使用 config 进行初始化
}

initialize({ option1: 'custom' });

对象的属性合法性检查 ：在使用对象字面量初始化对象时，可以使用 Object.assign() 进行属性的合法性检查和设置默认值。

function processUserInput(options) {
  const defaultOptions = {
    username: '',
    age: 0
  };

  options = Object.assign({}, defaultOptions, options);

  // 使用 options 进行后续操作
}

processUserInput({ username: 'John' });

注意

Object.assign()执行的是浅拷贝，对于引用类型的属性值，修改其中一个对象会影响到另一个对象。

可枚举自有属性是指对象直接在自身定义的属性，而不是从原型链继承的属性。

所有可枚举自有属性

"所有可枚举自有属性"指的是对象自身拥有的属性，并且这些属性可以被 for...in 循环遍历到。

换句话说，这些属性是对象直接在自己身上定义的属性，而不是从原型链上继承而来的属性，并且它们是可枚举的，即可以通过对象的 for...in 循环或 Object.keys() 方法获取到。

举个例子:

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

console.log(Object.keys(obj)); // 输出: ['a', 'b']

a 和 b 是 obj 对象的自有属性，因此它们是可枚举的，可以通过 Object.keys() 方法获取到。

要注意的是，有些属性可能是不可枚举的，比如通过 Object.defineProperty() 方法定义的属性，默认情况下是不可枚举的。

※ Object.defineProperty() 方法定义的属性默认是不可枚举的, 即不会出现在对象的 for-in 循环中, 也不会出现在 Object.keys() 中, 只有将属性的 enumerable 特性设置为 true 才能使其可枚举。

※ Object.defineProperty() 方法的四个属性及其默认值：

1. value ：属性的值，默认为 undefined。
2. writable ：属性是否可写，默认为 false。
3. enumerable ：属性是否可枚举，默认为 false。
4. configurable ：属性是否可配置，默认为 false。

举个例子:

const obj = {};

Object.defineProperty(obj, 'property1', {
  value: 42,
  writable: true
});

Object.defineProperty(obj, 'property2', {
  value: 43,
  enumerable: true
});

console.log(Object.keys(obj)); // Output: ['property2']

结语

通过深入理解 Object.assign() 方法的语法和应用场景，我们可以更好地利用它来简化代码，提高开发效率。同时，理解对象的可枚举自有属性以及 Object.defineProperty() 方法的特性，有助于我们更全面地掌握 JavaScript 中对象的相关概念。

希望本文能够帮助你加深对 Object.assign() 方法的理解，并在实际项目中发挥更大的作用。继续学习并熟练掌握 JavaScript 中的各种工具和技术，将会让你的编程之路更加顺畅。