javascript基础学习系列四百四十七：内存泄漏

写得不好的JavaScript 可能出现难以察觉且有害的内存泄漏问题。在内存有限的设备上，或者在函
数会被调用很多次的情况下，内存泄漏可能是个大问题。JavaScript 中的内存泄漏大部分是由不合理的
引用导致的。
意外声明全局变量是最常见但也最容易修复的内存泄漏问题。下面的代码没有使用任何关键字声明
变量：
function setName() {
name = ‘Jake’;
}
此时，解释器会把变量name 当作window 的属性来创建（相当于window.name = ‘Jake’）。
可想而知，在window 对象上创建的属性，只要window 本身不被清理就不会消失。这个问题很容易
解决，只要在变量声明前头加上var、let 或const 关键字即可，这样变量就会在函数执行完毕后离
开作用域。
定时器也可能会悄悄地导致内存泄漏。下面的代码中，定时器的回调通过闭包引用了外部变量：
let name = ‘Jake’;
setInterval(() => {
console.log(name);
}, 100);
只要定时器一直运行，回调函数中引用的name 就会一直占用内存。垃圾回收程序当然知道这一点，
因而就不会清理外部变量。
使用JavaScript 闭包很容易在不知不觉间造成内存泄漏。请看下面的例子：
let outer = function() {
let name = ‘Jake’;
return function() {
return name;
};
};
调用outer()会导致分配给name 的内存被泄漏。以上代码执行后创建了一个内部闭包，只要返回
的函数存在就不能清理name，因为闭包一直在引用着它。假如name 的内容很大（不止是一个小字符
串），那可能就是个大问题了。
4. 静态分配与对象池
为了提升JavaScript 性能，最后要考虑的一点往往就是压榨浏览器了。此时，一个关键问题就是如
何减少浏览器执行垃圾回收的次数。开发者无法直接控制什么时候开始收集垃圾，但可以间接控制触发
垃圾回收的条件。理论上，如果能够合理使用分配的内存，同时避免多余的垃圾回收，那就可以保住因
释放内存而损失的性能。
100 第4 章 变量、作用域与内存
浏览器决定何时运行垃圾回收程序的一个标准就是对象更替的速度。如果有很多对象被初始化，然
后一下子又都超出了作用域，那么浏览器就会采用更激进的方式调度垃圾回收程序运行，这样当然会影
响性能。看一看下面的例子，这是一个计算二维矢量加法的函数：
function addVector(a, b) {
let resultant = new Vector();
resultant.x = a.x + b.x;
resultant.y = a.y + b.y;
return resultant;
}
调用这个函数时，会在堆上创建一个新对象，然后修改它，最后再把它返回给调用者。如果这个
矢量对象的生命周期很短，那么它会很快失去所有对它的引用，成为可以被回收的值。假如这个矢量
加法函数频繁被调用，那么垃圾回收调度程序会发现这里对象更替的速度很快，从而会更频繁地安排
垃圾回收。
该问题的解决方案是不要动态创建矢量对象，比如可以修改上面的函数，让它使用一个已有的矢量
对象：
function addVector(a, b, resultant) {
resultant.x = a.x + b.x;
resultant.y = a.y + b.y;
return resultant;
}
当然，这需要在其他地方实例化矢量参数resultant，但这个函数的行为没有变。那么在哪里创
建矢量可以不让垃圾回收调度程序盯上呢？
一个策略是使用对象池。在初始化的某一时刻，可以创建一个对象池，用来管理一组可回收的对象。
应用程序可以向这个对象池请求一个对象、设置其属性、使用它，然后在操作完成后再把它还给对象池。
由于没发生对象初始化，垃圾回收探测就不会发现有对象更替，因此垃圾回收程序就不会那么频繁地运
行。下面是一个对象池的伪实现：
// vectorPool 是已有的对象池
let v1 = vectorPool.allocate();
let v2 = vectorPool.allocate();
let v3 = vectorPool.allocate();
v1.x = 10;
v1.y = 5;
v2.x = -3;
v2.y = -6;
addVector(v1, v2, v3);
console.log([v3.x, v3.y]); // [7, -1]
vectorPool.free(v1);
vectorPool.free(v2);
vectorPool.free(v3);
// 如果对象有属性引用了其他对象
// 则这里也需要把这些属性设置为null
v1 = null;
v2 = null;
v3 = null;
4.4 小结 101
8
1
2
3
4
5
14
6
7
9
10
11
13
12
如果对象池只按需分配矢量（在对象不存在时创建新的，在对象存在时则复用存在的），那么这个
实现本质上是一种贪婪算法，有单调增长但为静态的内存。这个对象池必须使用某种结构维护所有对
象，数组是比较好的选择。不过，使用数组来实现，必须留意不要招致额外的垃圾回收。比如下面这
个例子：
let vectorList = new Array(100);
let vector = new Vector();
vectorList.push(vector);
由于JavaScript 数组的大小是动态可变的，引擎会删除大小为100 的数组，再创建一个新的大小为
200 的数组。垃圾回收程序会看到这个删除操作，说不定因此很快就会跑来收一次垃圾。要避免这种动
态分配操作，可以在初始化时就创建一个大小够用的数组，从而避免上述先删除再创建的操作。不过，
必须事先想好这个数组有多大。
小结
JavaScript 变量可以保存两种类型的值：原始值和引用值。原始值可能是以下6 种原始数据类型之
一：Undefined、Null、Boolean、Number、String 和Symbol。原始值和引用值有以下特点。
 原始值大小固定，因此保存在栈内存上。
 从一个变量到另一个变量复制原始值会创建该值的第二个副本。
 引用值是对象，存储在堆内存上。
 包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。
 从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。
 typeof 操作符可以确定值的原始类型，而instanceof 操作符用于确保值的引用类型。
任何变量（不管包含的是原始值还是引用值）都存在于某个执行上下文中（也称为作用域）。这个
上下文（作用域）决定了变量的生命周期，以及它们可以访问代码的哪些部分。执行上下文可以总结
如下。
 执行上下文分全局上下文、函数上下文和块级上下文。
 代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数。
 函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃
至全局上下文中的变量。
 全局上下文只能访问全局上下文中的变量和函数，不能直接访问局部上下文中的任何数据。
 变量的执行上下文用于确定什么时候释放内存。
JavaScript 是使用垃圾回收的编程语言，开发者不需要操心内存分配和回收。JavaScript 的垃圾回收
程序可以总结如下。
 离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。
 主流的垃圾回收算法是标记清理，即先给当前不使用的值加上标记，再回来回收它们的内存。
102 第4 章 变量、作用域与内存
 引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。JavaScript 引擎不再使用这种算
法，但某些旧版本的IE 仍然会受这种算法的影响，原因是JavaScript 会访问非原生JavaScript 对
象（如DOM元素）。
 引用计数在代码中存在循环引用时会出现问题。
 解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对
象、全局对象的属性和循环引用都应该在不需要时解除引用。