赋值、浅拷贝和深拷贝的区别

此文首发于 https://lijing0906.github.io
中秋快乐！

今天放假，想总结一下赋值、浅拷贝和深拷贝的区别。

赋值（Copy）

赋值是将某一数值或对象赋给某个变量的过程，分两种情况：

• 基本数据类型：赋值，赋值后两个变量互不影响
• 引用数据类型: 赋址，两个变量指向同一个地址，同一个对象，相互之间有影响

对基本数据类型的赋值，两个变量相互不影响：

var a = 1;
var b = a;
a = 2;
console.log(a); // 2
console.log(b); // 1

对引用数据类型进行赋址操作，两个变量指向同一个对象，改变变量a的值会影响变量b的值，哪怕改变的只是对象a中的基础数据类型：

var a = {
   
    name: 'Jane',
    book: {
   
        name: 'Vue.js',
        price: 50
    }
};
var b = a;
b.name = 'hahaha';
b.book.price = 52;
console.log(a); // { name: 'hahaha', book: { name: 'Vue.js', price: 52 } }
console.log(b); // { name: 'hahaha', book: { name: 'Vue.js', price: 52 } }

通常开发中我们不希望出现这种相互影响的情况，所以需要浅拷贝或者深拷贝。

浅拷贝（Shallow Copy）

什么是浅拷贝

新建一个对象，这个对象有原始对象属性值的一份精确拷贝。如果属性是基本数据类型，拷贝的是基本数据类型的值；如果属性是引用类型，拷贝的是内存地址，所以如果一个对象改变了这个地址，就会影响到另外一个对象。

图中，SourceObject是原始对象，有基本数据类型field1和引用数据类型refObj。浅拷贝之后，field1和field2是不同属性，互不影响。refObj是同一个对象，改变之后会影响另一个对象。

简单地说，浅拷贝只解决了第一层的问题，即第一层的基本数据类型和引用类型数据的引用地址。

浅拷贝的应用场景