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

时间：01-08来源：作者：点击数：

Object.assign() 是一个非常实用的方法，用于将一个或多个源对象的属性复制到目标对象中。它在日常开发中经常被用来合并对象、创建对象的浅拷贝等。本文将详细介绍 Object.assign() 的用法、注意事项以及实际应用场景。

1. `Object.assign()` 的基本语法

Object.assign() 的语法如下：

Object.assign(target, ...sources)

target：目标对象，属性会被复制到该对象中。
...sources：一个或多个源对象，它们的属性会被复制到目标对象中。
返回值：返回目标对象。

2. `Object.assign()` 的作用

Object.assign() 的主要作用是将一个或多个源对象的可枚举属性复制到目标对象中。如果目标对象中已经存在同名属性，则会被源对象的属性覆盖。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = Object.assign(target, source);

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

在这个例子中：

target 是目标对象。
source 是源对象。
Object.assign() 将 source 的属性复制到 target 中。
最终返回的目标对象 target 包含了合并后的属性。

3. 使用场景

3.1 合并多个对象

Object.assign() 可以用来合并多个对象，生成一个新的对象。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const mergedObj = Object.assign({}, obj1, obj2, obj3);
console.log(mergedObj); // { a: 1, b: 2, c: 3 }

3.2 创建对象的浅拷贝

Object.assign() 可以用来创建对象的浅拷贝。

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

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

需要注意的是，Object.assign() 只能实现浅拷贝。如果对象的属性值是引用类型（如对象或数组），则拷贝的是引用，而不是值本身。

3.3 为对象添加默认值

在开发中，我们经常需要为对象设置默认值。Object.assign() 可以很方便地实现这一点。

const defaults = { theme: 'light', fontSize: 14 };
const userSettings = { fontSize: 16 };

const finalSettings = Object.assign({}, defaults, userSettings);
console.log(finalSettings); // { theme: 'light', fontSize: 16 }

4. 注意事项

4.1 浅拷贝问题

Object.assign() 只能实现浅拷贝。如果源对象的属性值是引用类型，则目标对象会共享该引用。

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);

obj2.b.c = 3;
console.log(obj1.b.c); // 3

如果需要深拷贝，可以使用其他方法，如 JSON.parse(JSON.stringify(obj)) 或第三方库（如 Lodash 的 _.cloneDeep）。

4.2 不可枚举属性不会被复制

Object.assign() 只会复制源对象的可枚举属性。不可枚举属性（如原型链上的属性）不会被复制。

const obj1 = Object.create({ a: 1 }); // a 是原型链上的属性
const obj2 = Object.assign({}, obj1);

console.log(obj2); // {}

4.3 目标对象会被修改

Object.assign() 会直接修改目标对象。如果不想修改目标对象，可以将目标对象设置为一个空对象 {}。

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

const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 2 } (target 被修改)

5. 实际应用场景

5.1 配置合并

在前端开发中，经常需要合并默认配置和用户自定义配置。

const defaultConfig = { mode: 'development', debug: false };
const userConfig = { debug: true };

const finalConfig = Object.assign({}, defaultConfig, userConfig);
console.log(finalConfig); // { mode: 'development', debug: true }

5.2 状态管理

在 Vue 或 React 等框架中，Object.assign() 可以用于更新组件的状态。

const initialState = { count: 0, loading: false };
const newState = { count: 1 };

this.setState(Object.assign({}, initialState, newState));

5.3 对象扩展

在 ES6 之前，Object.assign() 是实现对象扩展的主要方式。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const extendedObj = Object.assign({}, obj1, obj2, obj3);
console.log(extendedObj); // { a: 1, b: 2, c: 3 }