1. 定义和分类

在上一篇文章（数据类型）中我们知道 JavaScript 的数据分为基本数据类型和对象数据类型。它们的区别之一就是在计算机中的存储方式不同：基本类型数据是将变量名及值存储在变量对象中，而引用类型的数据是将变量名和地址存储在变量对象中，真正的值是存储在堆内存中，当然，变量对象本身也是存储在堆内存中。

再次将那张图放过来：

值类型与引用类型 - 图1

其中，基本类型（number,string,boolean,undefined,null）称为值类型，对象类型（object,function,array及封装对象）称为引用类型。

2. 值类型与引用类型的区别

2.1 可变性与不可变性

值类型的数据是不可变的。 这里说的不可改变，是指值本身，一旦创建，便不可更改。什么意思？举个例子：

  1. let a = 34;
  2. a = 43;

我们声明了一个变量 a 并赋值为 34，再将 a 的值改为 43。此时变化的，是变量 a 的值，而不是 34 本身变成了 43。

值类型与引用类型 - 图2

引用类型值是可以改变的。 引用类型的值是将变量名称和引用地址存储在变量对象中，而值是在堆内存中，我们可以随时更改它本身的值。

  1. let b = {
  2.     m: 1,
  3.     n: 'emmm'
  4. }
  5. b.m = 4;
  6. b;   // {m: 4,n: 'emmm'}

在上例中，我们声明 b 是一个引用类型值，接着，我们对 b 添加属性，我们可以看到，b 的值发生了变化。

2.2 值的复制

值类型的复制是值本身的复制，引用类型的复制是值引用的复制。 不同的复制方式在复制后有不同的表现。

  1. // 值类型的复制
  2. var a = 45;
  3. var b = a;
  4. console.log(b); // 45
  5. b = "someword";
  6. console.log(b) // "someword"
  7. console.log(a); // 45
  9. // 引用类型的复制
  10. var someone= {
  11.   age: 14,
  12.   weight: 134,
  13.  sex: 'man'
  14. };
  15. var anthor = someone;
  16. console.log(anthor); // {age: 14, weight: 134, sex: "man"}
  17. anthor.age = 16;
  18. console.log(anthor); // {age: 16, weight: 134, sex: "man"}
  19. console.log(someone); // {age: 16, weight: 134, sex: "man"}

从上面的代码中可以看到，变量 b 复制变量 a 的之后进行更改，b 的值改变了，而 a 的值没变；变量 anthor 复制的是 someone 的引用，无论通过谁改动，改的都是他们共同引用的那个对象。

具体过程如图所示：

  1.                ![image.png](https://cdn.nlark.com/yuque/0/2019/png/103124/1572351357005-739ad521-aad1-48da-a89e-d387054eb7d8.png#align=left&display=inline&height=205&name=image.png&originHeight=357&originWidth=958&size=45830&status=done&style=none&width=551)

3. 应用

它们的概念理解起来很简单，但在实际应用场景中，我们却很可能会犯错，接下来我们看一下。

3.1 == 与 ===

在进行 == 及 === 判断时，前者会对等号两边的值进行强制类型转换，即两个不同类型的值也有可能返回 true。而后者，则会进行严格的类型判断，只有类型和值完全均相同的情况下才会返回 true。

但如果两边都是引用类型，则会直接比较两个值的引用地址是否一致。

比如：

  1. // 值类型相等
  2. let a = 45;
  3. let b = 45;
  4. console.log(a == b); //  true
  5. b = '45';
  6. console.log(a == b); // true
  7. console.log(a === b); // false
  8. // 引用类型相等
  9. let men_1 = {
  10.   age: 23,
  11.   sex: 'man',
  12. };
  13. let men_2 = {
  14.   age: 23,
  15.   sex: 'man',
  16. };
  18. let men_3 = men_1;
  19. console.log(men_1 == men_2); //  false
  20. console.log(men_1 === men_2); //  false
  21. console.log(men_1 == men_3); // true
  22. console.log(men_1 === men_3); // true

从上面我们可以看到：45 === 45 但 45 != '45'，但 men_1 虽然和 men_2 的值相同，但他们并不相等，无论是 == 还是 ===。

那该如何按照我们的想法比较呢？

可以把它们转化为字符串进行比较，当然，这样也不能保证完全正确（比如对象中含有正则表达式），更严格的方法以后再讨论。

  1. function compare(a, b) {
  2.   return JSON.stringify(a) == JSON.stringify(b);
  3. }

3.2 函数传参

函数传参时，是将传入的参数拷贝到函数的局部变量上，因此，拷贝带来的问题在函数传参时依旧存在。

  1. function foo(a,b) {
  2.   var d = a;
  3.   d = 'string';
  4.   var e = b;
  5.   e.name = 'xiaohong';
  6. }
  7. var exmp_1 = 3;
  8. var exmp_2 = {
  9.   name: 'xiaohua'
  10. };
  11. foo(exmp_1,exmp_2);
  12. console.log(exmp_1); // 3
  13. console.log(exmp_2); // {name: "xiaohong"}

如上所示，值类型传入后在函数内的修改不会污染外部的变量，而引用类型的变量由于复制的是引用，在函数内部的改动会影响到外部的变量。

因此，我们要避免在函数中直接更改参数的值，除非你需要这么做。

很多时候，我们都会使用到传入的参数并需要更改值，此时我们应该在函数内部进行一次浅复制。

  1. function foo(people) {
  2.   const newPeople = {...people};
  3.   newPeople.firstName = 'wang';
  4.   return newPeople;
  5. }
  6. var Liu = {
  7.    firstName: 'liu'
  8. }
  9. foo(Liu); // {firstName: 'wang'}
  10. console.log(Liu); // {firstName: "liu"}

5. 一道小题

到此，关于值类型与引用类型的介绍就结束了，留一道题给大家，大家可以借此看一看对本文的理解。

  1. function create(person) {
  2.   var personA = person;
  3.   personA.name = 'David';
  4.   var personB = {
  5.       name: 'saay',
  6.       age: 13
  7.   };
  8.   return personB;
  9. }
  10. var Jone = {
  11.   name: 'Join',
  12.   age: 25
  13. }
  14. var Wang = create(Jone);
  15. console.log(Jone) ;// ??
  16. console.log(Wang); // ??