JS中值类型和引用类型的深层理解

---

前言

最近在复习JS的基础内容，看到了关于JS中值类型和引用类型的问题，这类问题也经常会出现在面试的问题中，结合自己的理解记录一下

---

一、什么是值类型和引用类型？

我们先来看两个例题：
值类型：

这个大家应该都能理解，比较直观的逻辑，打印的b结果为100

引用类型：

a赋值成一个对象age：20，b赋值为a，b.age赋值为21，最后打印a.age的值也为21

区别： 值类型各自赋值，不会相互干扰；引用类型上面b改变了a也会随之改变

二、深入分析

上面举了两个例子说明值类型和引用类型的区别，那么为什么会出现这样的结果呢，下面还是以刚才的两个例子来进一步的深入分析：

1.值类型

值类型都是通过栈进行存储的：

• 第一步：把a赋值成100
• 第二步：把b赋值为a，也是等于100
• 第三步，把a赋值为100，a和b互不影响，b的值仍未100

2.引用类型

这里除了上面的栈，还引入了一个新的概念堆。在计算机的存储中，栈从上往下排列，堆从下往上排列，一般不会重合。来看一下上面例子的存储过程：

• 第一步：给age赋值成一个等于20的对象，他的key会给一个内存地址一，此时变量a指向的是一个内存地址1，也就是说a里面存储的并不是这个对象，而是存入了内存地址指向这个对象
• 第二步：a指向内存地址一，b也指向内存地址一，看似a等于age：20，b也等于age：20
• 第三步：b.age等于21的话，肯定会把下面的对象改为age：21，因为a指向的也是这个地址，所以a.age也是21

---

三、值类型和引用类型有哪些

值类型：

undefined，string，number，布尔类型， Symbol类型

引用类型：

对象，数组
null也是特殊的引用类型，指针指向空地址
函数也是特殊的引用类型，但不用来存储数据

四、总结

看了上面的一个存储过程，是不是对值类型和引用类型的赋值过程更清楚了呢，那么为什么值类型和引用类型会以这种方式进行赋值呢？主要原因还是计算机考虑到性能和存储的问题：

• 值类型，的内存占用比较小，所以可以直接进行赋值没有问题，不会对系统造成很大的影响
• 引用类型则不一样，虽这里是age：20，但是一个json可能非常的大，如果直接赋值会使速度非常慢

有没有什么办法能像赋值值类型一样，将引用类型也去以这种方式赋值呢？这里就涉及到JS深拷贝的内容，这里就不做叙述了
关于 JS 深拷贝的使用及理解，大家可以移步 JS深拷贝的前因后果
如果对你有帮助，点赞支持谢谢~

面试提问

js数据类型分为哪几种，它们的区别是什么？

答：

1. js数据类型有八种，分别是 undefined ，null， boolean, number, string, symbol, bigint。其中symbol, bigint是 ES6中新增的数据类型。symbol代表独一无二且不可变 的数据类型，用来解决全局变量冲突的 问题 。bigint表示任意精度格式的整数。
2. 数据类型主要区分为值类型和引用数据类型。值类型有undefined，number，string等，引用数据类型有数组，对象，函数。他们的主要区别是存储方式，值类型通常存放在栈中。而引用类型通常在栈中存放指针，指针指向堆中该实体的起始位置。
3. 值类型和引用类型的区分主要原因还是计算机考虑到性能和存储的问题，值类型，的内存占用比较小，所以可以直接进行赋值没有问题，不会对系统造成很大的影响。引用类型则不一样，一个json可能非常的大，如果直接赋值会使速度非常慢。