对象引用和复制这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情前言不同于7种原始数据类型复制

这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

前言

不同于7种原始数据类型复制时作为整体复制，对象通过“引用”复制。下面来看看普通的字符串复制

let message = "Hello!"; 
let phrase = message;

上面这段代码，首先message被赋值“Hello”,之后将message复制到phrase，因此phras也存储“Hello”

对象的复制

赋值了对象的变量存储的不是对象本身，而是该对象“在内存中的地址” —— 换句话说就是对该对象的“引用”。

让我们看一个这样的变量的例子：

let user = {
  name: "John"
};

这是它实际存储在内存中的方式：

可以看见user是一个盒子，不同于原始类型它里面存的是name属性的地址而不是值。因此当我们想要获取user.name，就要先查看user内的地址中的内容。

这样的特性就会残生一个很有意思的现象，那就是我们复制的也是引用而非它本身

例如：

let user = { name: "John" };

let admin = user; // 复制引用

现在我们有了两个变量，它们保存的都是对同一个对象的引用：

上图可以看到，对象复制就是存储引用的地址而已，因此当我们对复制后的对象属性修改并影响它本身

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 通过 "admin" 引用来修改

alert(user.name); // 'Pete'，修改能通过 "user" 引用看到

这就像我们有一个带有两把钥匙的柜子，使用其中一把钥匙（admin）打开柜子并更改了里面的东西。那么，如果我们稍后用另一把钥匙（user），我们仍然可以打开同一个柜子并且可以访问更改的内容。

浅拷贝（Object.assign）

上面的复制效果达成了，但是会导致更改属性时原来的值也一起变了，这并不理想。因此我们可以创建一个新对象，通过遍历已有对象的属性，并在原始类型值的层面复制它们，以实现对已有对象结构的复制。

就像这样：

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 新的空对象

// 将 user 中所有的属性拷贝到其中
for (let key in user) {
  clone[key] = user[key];
}

// 现在 clone 是带有相同内容的完全独立的对象
clone.name = "Pete"; // 改变了其中的数据

alert( user.name ); // 原来的对象中的 name 属性依然是 John

我们也可以使用 Object.assign 方法来达成同样的效果。

语法是：

let clone = {}
Object.assign(clone, user)

// 或者

let clone = Object.assign({}, user);

第一个参数 `是指目标对象。
更后面的参数 [……]（可按需传递多个参数）是源对象。
该方法将所有源对象的属性拷贝到目标对象中。换句话说，从第二个开始的所有参数的属性都被拷贝到第一个参数的对象中。
调用结果返回目标对象。

它将 user 中的所有属性拷贝到了一个空对象中，并返回这个新的对象。

如果被拷贝的属性的属性名已经存在，那么它会被覆盖：

let user = { name: "John" };

Object.assign(user, { name: "Pete" });

alert(user.name); // 现在 user = { name: "Pete" }

还有其他克隆对象的方法，例如使用 spread 语法 clone = {...user}，在后面再谈。

深拷贝

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true，同一个对象

// user 和 clone 分享同一个 sizes
user.sizes.width++;       // 通过其中一个改变属性值
alert(clone.sizes.width); // 51，能从另外一个获取到变更后的结果

因为 user.sizes 是个对象，它会以引用形式被拷贝。因此 clone 和 user 会共用一个 sizes。为了解决这个问题，并让 user 和 clone 成为两个真正独立的对象，我们应该使用一个拷贝循环来检查 user[key] 的每个值，如果它是一个对象，那么也复制它的结构。这就是所谓的“深拷贝”。


const _ = require('lodash'); 
  
let user = {
    name: "John",
    sizes: {
      height: 182,
      width: 50
    }
  }; 

  let clone = _.cloneDeep(user);
  
  // user 和 clone 分享同一个 sizes
  user.sizes.width++;       // 通过其中一个改变属性值
  console.log(clone.sizes.width); // 50，成功了

lodash 库的 _.cloneDeep(obj)。