JavaScript 基本类型和引用类型区别

电玩女神 2023-09-29 08:31 19阅读 0赞

# 基本概念 #

JS有以下这些数据类型：`undefined`、`null`、`string`、`boolean`、`number`、`symbol`、`bigint`、`object`。

其中，前面 7 个被称为`基本类型`，又叫`原始类型`（`Primitive Type`）；  
`object`，被称为`引用类型`（`Reference Type`），或叫做`对象类型`（`Object Type`）。

# 区别 #

基本类型在`栈`中存储，而引用类型对象部分在`堆`中存储，`栈`中存储的对象的`引用地址`。

let str = 'hello world';
    let num = 123;
    let obj1 = {
        a: 1, b: 2};
    let obj2 = obj1;
    let arr = [1, 2, 3];

它们的存储如下图：  
![1cfdd34ff73d4d5a80e22f6a0f6a185c.png][]  
基本类型的值是`不可变`的，向基本类型变量赋值时，实际是赋予它一个新值，而不是改变旧值。因此`原始类型`这个表述可能更贴切，`原始`就是不可再分，无法修改的意思。

let str = 'hello wrold';
    str = 'hello'; // 将'hello'赋值给str，而非将'hello world'修改成'hello'

引用类型往往由基本类型或其他对象组成，它是`可变`的。

修改对象的值：

let obj1 = {
        a: 1, b: 2};
    obj1.c = 3;
    console.log(obj1); // {a: 1, b: 2, c: 3}
    let arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // [1, 2, 3, 4]

> 注意，这里我们说的`可变`和`不可变`，都是针对`值`的，而不是针对变量，变量是可变的。

在传参方面，基本类型是`值传递`，引用类型是`引用传递`。

在值的相等比较上，要区分是严格相等（`===`），还是宽松相等（`==`）。

对于严格相等，基本类型比较值是否相等，而引用类型比较引用地址是否相等（是否视同一个对象）。  
对于宽松相等，不管是基本类型，还是引用类型，或者基本类型和引用类型比较，它们都是比较值，这中间可能伴随着`类型转化`。感兴趣可以看我的另一篇文章，[js 类型转换保姆级讲解][js]。

对于类型检查，基本类型使用`typeof`，有个特例，`typeof null`结果为`object`，需要注意一下。引用类型使用`instanceof`。

# 总结 #

<table> 
 <thead> 
  <tr> 
   <th>对比项</th> 
   <th>基本类型</th> 
   <th>引用类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>存储</td> 
   <td><code>栈</code></td> 
   <td>引用存在<code>栈</code>，值存在<code>堆</code></td> 
  </tr> 
  <tr> 
   <td>是否可变</td> 
   <td><code>不可变</code></td> 
   <td><code>可变</code></td> 
  </tr> 
  <tr> 
   <td>传递类型</td> 
   <td><code>值传递</code></td> 
   <td><code>引用传递</code></td> 
  </tr> 
  <tr> 
   <td>比较</td> 
   <td>比较<code>值</code></td> 
   <td>严格相等比较<code>引用地址</code>，宽松相等比较<code>值</code></td> 
  </tr> 
  <tr> 
   <td>类型检查</td> 
   <td><code>typeof</code></td> 
   <td><code>instanceof</code></td> 
  </tr> 
 </tbody> 
</table>

[1cfdd34ff73d4d5a80e22f6a0f6a185c.png]: https://img-blog.csdnimg.cn/1cfdd34ff73d4d5a80e22f6a0f6a185c.png
[js]: https://blog.csdn.net/qq_23365135/article/details/123912071