【JS面试题】值类型和引用类型的区别

值类型：各论各的，不会互相干扰

a是a，b是b,a值改变，b不会改变，还是100

//值类型
let a = 100
let b = a
a = 200
console.log(b) //100

解析：

• 为什么会这样的一种现象？不管是值类型的a和b还是引用类型的a和b都是变量，变量一般会在什么地方出现呢？一般会在函数环境中出现或者是全局环境中出现，它的值类型都是在栈中存储的，栈是计算机内存的结构，它是由js引擎或者是js虚拟机实现的。图中我们在栈中写了key/value,key/value是一个抽象的表述，就是说key为变量的名字，value表示变量的值。第一步我们把a赋值100,a中key为a,value为100，第二步把b复制成a,key为b,value为100，第三步，把a改为200，b还是100。符合我们主观臆想。

引用类型：一旦赋值了，b改变了，a也会随之改变

//引用类型
let a = { age:20 }
let b = a 
b.age = 21
console.log(a.age) //21

栈是上面那个图的，这里引入堆。比如说，我们在计算机变量存储的时候，栈和堆是同时存在的。栈在上面，栈是从上往下累加；堆则是从下往上一层层累加，栈和堆一般不会重合，计算机内存够用。引用类型不一样，比如说，

1. 我们把a赋值成{age:20}的一个对象,它会怎么办呢？它会在堆中生成一个内存地址1，然后把{age:20}，放在堆里面，它的key叫做内存地址1，这时候的变量a指向内存地址1，这个时候a存储的并不是这个{age:20},而是存了一个内存地址1，内存地址1指向对象{age:20}。
2. b赋值成a,a指向内存地址1，b也指向内存地址1，建立一个新地址，看似a等于{age:20},b等于{age:20}
3. b的age赋值成21，b指向内存地址1，b.age赋值成21，它肯定会把地方改为21，所以说这时候再去访问a.age,因为a也是指向内存地址1，它就也变成了21

从js引擎去解析或去定义这个变量，堆栈模型，很明白的开出来，值类型、引用类型他们的本质是什么。

知道现象和本质，还需要知道为什么值类型是直接赋值过来，而引用类型却只能赋值内存地址，不能把{age:20}赋值过来。为什么呢？

• 原因：考虑到性能问题，或者存储的问题。因为像100等等的值类型，它的占用空间是比较少的，因为它只有一个值。所以可以直接赋值，赋值的时候对性能也不会造成很大的影响。引用类型则不一样了，我们这里虽然写了{age:20},但是一个json对象可能会非常非常大，如果直接放在栈的value中，首先第一个，会太大，导致内存地址太大，这个地方不好管理；第二个，如果直接复制值，会导致复制过程中非常慢，所以说计算机所有的程序，所有的代码，所有的语言，都是采用这种方式。值类型和引用类型严格分离出来。他们的机制、他们的拷贝机制、他们的赋值机制、他们的存储机制也是严格分离出来。它是基于内存的空间和cpu的耗时来去做区分。不得已而为之。

常见值类型：

let a // undefined
const s = 'abc'
const n = 100
const b = true
const s = Symbol('s');

常见引用类型：