JS的内存机制在很多前端开发者看来并不是那么重要，但是如果你想深入学习JS，并将它利用好，打造高质量高性能的前端应用，就必须要了解JS的内存机制。对于内存机制理解了以后，一些基本的问题比如最基本的引用数据类型和引用传递到底是怎么回事儿？比如浅复制与深复制有什么不同？还有闭包，原型等等就迎刃而解了。
JS类型
在JS中，js的类型分为两个大类，分别是基本数据类型和引用数据类型。我们暂时先抛开ES6不说，先只说在ES5中的类型。在ES5中有5中简单数据类型（也就是上面说的基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。其中可以算在object中的还有Array和Function。
在内存当中，基本数据类型存放在栈中，引用数据类型存放在堆中。说到这里就要说一下内存空间了，一般来说，js的内存空间分为栈（stack）、堆（heap）、池（一般也会归类栈中）。其中栈存放变量，堆存放复杂对象，池存放常量，所以也叫常量池。
但是有一个变量是特殊的，那就是闭包中的变量，闭包中的变量并不保存中栈内存中，而是保存在堆内存中，这也就解释了函数之后之后为什么闭包还能引用到函数内的变量。
function A() {
let a = 1
function B() {
console.log(a)
}
return B
}闭包的简单定义是：函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。
函数 A 弹出调用栈后，函数 A 中的变量这时候是存储在堆上的，所以函数B依旧能引用到函数A中的变量。现在的 JS 引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。
引用数据类型与堆内存
与其他语言不同，JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以粗浅地理解为保存在变量对象中的一个地址，该地址与堆内存的实际值相关联。
为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。
var b = { m: 20 }; // 变量b存在栈中，对应的值就是一个索引指向对象{m: 20},{m:20}作为对象存在于堆内存中。
因此当我们要访问堆内存中的引用数据类型时，实际上我们首先是从变量对象中获取了该对象的地址引用（或者地址指针），然后再从堆内存中取得我们需要的数据。
如此，就会出现我们经常被问到的关于引用数据类型的值问题了 。
var x =30;
var b = x;
x+=10;
console.log(b);上面的问题我们很容易解答，答案就是会输出30，x的操作不会对b有什么影响，因为在变量对象中的数据发生复制行为时，系统会自动为新的变量分配一个新值。var b = a执行之后，a与b虽然值都等于20，但是他们其实已经是相互独立互不影响的值了。但是下面这个问题就有意思了
var x={m:1}
var y = x;
x.m++;
console.log(y.m);通过输出我们发现答案是2。这是因为我们通过var y = x是执行一次复制引用类型的操作。引用类型的复制同样也会为新的变量自动分配一个新的值保存在变量对象中，但不同的是，这个新的值，仅仅只是引用类型的一个地址指针。当地址指针相同时，尽管他们相互独立，但是在变量对象中访问到的具体对象实际上是同一个。
微信扫一扫 
支付宝扫一扫 