JavaScript:Object.assign()的理解

最新推荐文章于 2025-11-17 08:54:28 发布

原创最新推荐文章于 2025-11-17 08:54:28 发布 · 781 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

前端八股文专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中的Object.assign()方法，包括其功能（属性复制、浅拷贝、覆盖机制）、用法示例以及引用类型的处理。重点强调了该方法的浅复制特性，即只复制一层属性，不递归复制嵌套对象。

作用：Object.assign()是一个方法，用于将一个或多个源对象的属性复制到目标对象中，返回复制完成后的目标对象

Object.assign(target, ...sources)
其中，target 是目标对象，sources是一个或多个源对象，它们的可枚举属性将会被复制到目标对象中。Object.assign()方法是浅拷贝的，它只会复制对象的一层属性，如果属性值是对象，则复制的是对象的引用。

理解：

Object.assign会将source(源对象)里面的可枚举属性复制到target(目标对象)，如果和target的已有属性重名，则会覆盖。
后续的source会覆盖前面的source的同名属性
Object.assign方法执行的是浅拷贝：只会复制对象的第一层属性，而不会递归地复制嵌套对象的属性。如果源对象的属性值是对象或者数组等引用类型，那么目标对象中对应的属性仍然会引用同一个内存地址，修改其中一个对象的属性值会影响到另一个对象

代码示例：
①对象属性复制： Object.assign() 方法将源对象的可枚举属性复制到目标对象中

const target = {};
const source = { foo: 1, bar: 2 };
Object.assign(target, source);
console.log(target); // 输出：{ foo: 1, bar: 2 }

const sourceArray = [1, 2, 3];  
const targetObject = {};
Object.assign(targetObject, sourceArray);
console.log(targetObject); // 输出：{}
console.log(targetObject.length); // 输出：undefined，数组的length属性是不可枚举属性

②多个源对象：可以传入多个源对象，它们的属性会依次复制到目标对象中，后面的源对象会覆盖前面的源对象

const target = {};
const source1 = { foo: 1 };
const source2 = { bar: 2 };
Object.assign(target, source1, source2);
console.log(target); // 输出：{ foo: 1, bar: 2 }

③属性覆盖：如果目标对象中已经有相同属性名的属性，则后面的源对象会覆盖之前的值

const target = { foo: 1, bar: 2 };
const source = { bar: 3, baz: 4 };
Object.assign(target, source);
console.log(target); // 输出：{ foo: 1, bar: 3, baz: 4 }

④引用复制： Object.assign() 方法是浅拷贝的，如果属性值是对象，则复制的是对象的引用

const obj1 = { a: { b: 1 } };
const obj2 = {};
Object.assign(obj2, obj1);
console.log(obj2); // 输出：{ a: { b: 1 } }
obj1.a.b = 2;
console.log(obj2); // 输出：{ a: { b: 2 } }（obj2.a.b 也被修改）