与原始类型相比，对象的根本区别之一是对象是“通过引用”被存储和复制的，与原始类型值相反：字符串，数字，布尔值等 —— 始终是以“整体值”的形式被复制的。

字符串复制，这里我们将 message 复制到 phrase：

  1. let message = "Hello!";
  2. let phrase = message;

结果我们就有了两个独立的变量，每个都存储着字符串 “Hello!”。
variable-copy-value.svg
但是，对象不是这样的。
赋值了对象的变量存储的不是对象本身，而是该对象“在内存中的地址”，换句话说就是对该对象的“引用”。

  1. let user = {
  2.   name: "John"
  3. };

这是它实际存储在内存中的方式：
variable-contains-reference.svg
该对象被存储在内存中的某个位置（在图片的右侧），而变量 user（在左侧）保存的是对其的“引用”。
我们可以将对象变量（例如 user）想象成一张带有地址的纸。
当我们对对象执行操作时，例如获取一个属性 user.name，JavaScript 引擎将对该地址进行搜索，并在实际对象上执行操作
现在，这就是为什么它很重要。
当一个对象变量被复制 —— 引用则被复制，而该对象并没有被复制。

  1. let user = { name: "John" };
  3. let admin = user; // 复制引用

现在我们有了两个变量，它们保存的都是对同一个对象的引用：
variable-copy-reference.svg
这里仍然只有一个对象，现在有两个引用它的变量。
我们可以通过其中任意一个变量来访问该对象并修改它的内容：

  1. let user = { name: 'John' };
  3. let admin = user;
  5. admin.name = 'Pete'; // 通过 "admin" 引用来修改
  7. alert(user.name); // 'Pete'，修改能通过 "user" 引用看到

这就像我们有个带两把钥匙的柜子，并使用其中一把钥匙（admin）来打开它。那么，我们如果之后用另外一把钥匙（user），则也能看到更改。

通过引用来比较

仅当两个对象为同一对象时，两者才相等。
例如，这里 a 和 b 两个变量都引用同一个对象，所以它们相等：

  1. let a = {};
  2. let b = a; // 复制引用
  4. alert( a == b ); // true，都引用同一对象
  5. alert( a === b ); // true

而这里两个独立的对象则并不相等，即使它们看起来很像（都为空）：

  1. let a = {};
  2. let b = {}; // 两个独立的对象
  4. alert( a == b ); // false

对于类似 obj1 > obj2 的比较，或者跟一个原始类型值的比较 obj == 5，对象都会被转换为原始值。我们很快就会学到对象是如何转换的，但是说实话，很少需要进行这样的比较，通常是在编程错误的时候才会出现这种情况。

克隆与合并，Object.assign

如果我们真的想要复制一个对象，那么就需要创建一个新对象，并通过遍历现有属性的结构，在原始类型值的层面，将其复制到新对象，以复制已有对象的结构。

  1. let user = {
  2.   name: "John",
  3.   age: 30
  4. };
  6. let clone = {}; // 新的空对象
  8. // 将 user 中所有的属性拷贝到其中
  9. for (let key in user) {
  10.   clone[key] = user[key];
  11. }
  13. // 现在 clone 是带有相同内容的完全独立的对象
  14. clone.name = "Pete"; // 改变了其中的数据
  16. alert( user.name ); // 原来的对象中的 name 属性依然是 John

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

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

例如，我们可以用它来合并多个对象：

  1. let user = { name: "John" };
  3. let permissions1 = { canView: true };
  4. let permissions2 = { canEdit: true };
  6. // 将 permissions1 和 permissions2 中的所有属性都拷贝到 user 中
  7. Object.assign(user, permissions1, permissions2);
  9. // 现在 user = { name: "John", canView: true, canEdit: true }

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

  1. let user = { name: "John" };
  3. Object.assign(user, { name: "Pete" });
  5. alert(user.name); // 现在 user = { name: "Pete" }

我们也可以用 Object.assign 代替 for..in 循环来进行简单克隆：

  1. let user = {
  2.   name: "John",
  3.   age: 30
  4. };
  6. let clone = Object.assign({}, user);

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

深层克隆

到现在为止，我们都假设 user 的所有属性均为原始类型。但属性可以是对其他对象的引用。那应该怎样处理它们呢？
例如：

  1. let user = {
  2.   name: "John",
  3.   sizes: {
  4.     height: 182,
  5.     width: 50
  6.   }
  7. };
  9. alert( user.sizes.height ); // 182

现在这样拷贝 clone.sizes = user.sizes 已经不足够了，因为 user.sizes 是个对象，它会以引用形式被拷贝。因此 clone 和 user 会共用一个 sizes：

  1. let user = {
  2.   name: "John",
  3.   sizes: {
  4.     height: 182,
  5.     width: 50
  6.   }
  7. };
  9. let clone = Object.assign({}, user);
  11. alert( user.sizes === clone.sizes ); // true，同一个对象
  13. // user 和 clone 分享同一个 sizes
  14. user.sizes.width++;       // 通过其中一个改变属性值
  15. alert(clone.sizes.width); // 51，能从另外一个看到变更的结果

为了解决此问题，我们应该使用会检查每个 user[key] 的值的克隆循环，如果值是一个对象，那么也要复制它的结构。这就叫“深拷贝”。
我们可以用递归来实现。或者不自己造轮子，使用现成的实现，例如 JavaScript 库 lodash 中的 _.cloneDeep(obj)。

总结

对象通过引用被赋值和拷贝。换句话说，一个变量存储的不是“对象的值”，而是一个对值的“引用”（内存地址）。因此，拷贝此类变量或将其作为函数参数传递时，所拷贝的是引用，而不是对象本身。
所有通过被拷贝的引用的操作（如添加、删除属性）都作用在同一个对象上。
为了创建“真正的拷贝”（一个克隆），我们可以使用 Object.assign 来做所谓的“浅拷贝”（嵌套对象被通过引用进行拷贝）或者使用“深拷贝”函数，例如 _.cloneDeep(obj)。