Object.assign()与=赋值实现浅拷贝的区别及代码输出困惑

嘿，我来帮你把这俩的区别掰扯清楚，还有你困惑的代码输出问题也一起拆解明白～

核心差异 #

首先得明确：直接赋值（=）根本不是拷贝操作，它只是给内存里的同一个对象多绑了一个变量名；而Object.assign()才是真正的浅拷贝（针对顶层属性）。

1. 直接赋值（=）的本质 #

当你写var obj2 = obj时，obj和obj2指向的是内存中同一个对象。不管你修改哪个变量的属性（不管是顶层还是嵌套的），另一个变量都会同步变化——因为它们本质上就是同一个东西的两个“别名”。

2. Object.assign()的浅拷贝逻辑 #

Object.assign(target, source)会把源对象的可枚举顶层属性复制到目标对象里：

• 如果目标对象是一个新的空对象（比如你例子里的Object.assign({}, obj)），会生成一个全新的顶层对象；
• 但对于嵌套的对象/数组，它只会复制引用——也就是说，新旧对象里的嵌套属性指向的还是内存中的同一个子对象，修改嵌套属性会互相影响。

你的代码示例拆解 #

用Object.assign()的情况 #

先看你的代码：

var obj = { name: 'wsscat', age: 0, add: { a: 'beijing' } }
var obj2 = Object.assign({}, obj);
obj2.age = 18;
obj2.add.a = 'shanghai';
console.log(obj)
console.log(obj2)

输出结果：

{ name: 'wsscat', age: 0, add: { a: 'shanghai' } }
{ name: 'wsscat', age: 18, add: { a: 'shanghai' } }

原因很简单：

• obj2是Object.assign生成的新对象，所以obj2.age是独立的顶层属性，修改它只会影响obj2，obj的age不受影响；
• 但obj2.add和obj.add指向的是同一个嵌套对象，所以修改obj2.add.a时，obj里的add.a也会跟着变——因为它们共享同一个子对象的引用。

用直接赋值的情况 #

如果是用=赋值：

var obj = { name: 'wsscat', age: 0, add: { a: 'beijing' } }
var obj2 = obj;
obj2.age = 18;
obj2.add.a = 'shanghai';
console.log(obj)
console.log(obj2)

输出会是两个完全一样的对象：

{ name: 'wsscat', age: 18, add: { a: 'shanghai' } }
{ name: 'wsscat', age: 18, add: { a: 'shanghai' } }

因为obj和obj2是同一个对象的两个引用，不管改哪个的属性，另一个都会同步变化。

一句话总结 #

• 直接赋值：共享同一个对象，改一个全变；
• Object.assign()：顶层属性独立，嵌套属性共享引用，仅实现浅拷贝。

内容的提问来源于stack exchange，提问作者hui