【js踩坑之路】复制变量值的具体用法

问题描述：

在VUE中，设置了this.a = this.b（b为object类型），input中使用v-model绑定了this.a，发现在改变a的值后，b的值也会跟着改变。经查询，是由于不清楚js中复制变量值的具体用法，从而引发的问题。

复制变量值

从一个变量向另一个变量复制值的操作。在上述操作中，this.a = this.b的操作就是复制变量值。

复制变量值包括两种操作，一种是复制基本类型值、另外一种是引用类型值。

1.复制基本类型值

在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上。两个相互操作无影响。

// 基本类型
let a = 3;
let b = a;
b = 4;
console.log(b);  // 4
console.log(a);  // 3

2.复制引用类型值（Object、Array）

将存储在变量对象中的值复制一份到为新变量分配的空间中。引用类型值是保存在堆内存中的对象， 所以，新旧两个对象指向同一个对象。一个变量的值改变后会对另外一个变量造成影响。

// 引用类型
let c = {
	name: 'test1',
	age: '13'
};
let d = c;
d.name = 'test2';
console.log(d.name);  // test2
console.log(c.name);  // test2

那如果如何实现复制一个object类型的值，但又不改变它的值呢？这里又引出了object类型的浅拷贝和深拷贝。

浅拷贝

浅拷贝为复制了对象的引用地址，新旧两个对象指向同一个内存地址。

复制的是对象的引用，而不是对象本身，比如this.a = this.b

深拷贝

深拷贝是把对象的引用以及对象本身都复制过来。两个对象修改其中任意的值另一个值不会改变。

例：

this.a = Object.assign({}, this.b);

this.a = {...this.b};