JavaScript是一门非常灵活的动态语言，和Java一样，JavaScript也具有动态内存回收机制（垃圾回收）。也就是说，如果一个对象没有任何人引用了，内存就会被自动释放，不需要像C语言那样手动调用free()方法。
所以，避免JavaScript内存泄漏的唯一黄金法则就是：
不要引用不再需要的变量
但现实情况是，你一不小心就内存泄漏了。如果程序运行变慢，或者浏览器直接崩溃，那肯定是有内存泄漏问题了。内存泄漏的罪魁祸首无外乎下面三种情况（代码见GitHub）：
- 全局变量
- 全局监听
- 定时器
下面我们就分别用实例介绍这三种内存泄漏情况，并给出了修复内存泄漏的方法，以及用Chrome开发者工具查找内存泄漏的方法。
全局变量
全局变量是所有编程语言中最慎用的功能，JavaScript中有两种声明全局变量的方式：
- 在任何函数外部声明变量
<script>
var leakObject = new LeakObject();
</script>
- 给window添加属性
function addLeak () {
window.leakObject = new LeakObject();
}
除了这两种主动声明全局变量的方式外，还有下面这两种非常隐蔽的方式也会声明全局变量，也就是最常见很隐蔽的内存泄漏的方式：
- 不声明变量，直接给变量赋值（相当于给window增加了属性）
function addLeak () {
leakObject = new LeakObject();
}
- 函数体内给this赋值属性，但调用函数时不用对象去调用，而是直接调用函数（这时候this是window）
function addLeak () {
this.leakObject = new LeakObject();
}
addLeak()
不过上面这2种情况可以通过设置“严格模式”避免，关于“严格模式”，可以参考MDN：Strict mode。
那主动声明的全局变量如何释放内存了？答案就是主动将全局变量赋值成null：
function releaseLeak () {
window.leakObject = null;
}
下面是完整代码1-global-variable.html：
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';
function LeakObject () {
this.value = new Array(1024 * 1024).join('X');
}
function addLeak () {
window.leakObject = new LeakObject();
}
function releaseLeak () {
window.leakObject = null;
}
</script>
</head>
<body>
<button onclick="addLeak()">Add Leak</button>
<button onclick="releaseLeak()">Release Leak</button>
</body>
</html>
打开Chrome开发者工具，切换到Memory页签，选择“Record allocation timeline”，点击开始。然后多次点击界面的“Add Leak"按钮，你会发现蓝色的内存分配的进度条在移动。这是因为每次点击按钮后，分配了1M的内存（为了测试效果明显new Array(1024 * 1024).join('X')），但覆盖了之前全局变量的值，所以之前的蓝色进度条变灰了，也就是内存被回收了。点击左上角的红色停止按钮，然后在搜索栏输入LeakObject，就会过滤出我们内存泄漏的变量。最后可以刷新浏览器，重新来一次，这此点击网页中的"Release Leak"按钮试试，你会发现这次就没有内存泄漏了。
全局监听
全局监听是指加在window或者document对象上的监听，有两种添加方式：
- window.on***，比如window.onresize
- window.addEventListener
下面是全局监听的示例2-global-listener：
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';
function LeakObject () {
this.value = new Array(1024 * 1024).join('X');
}
function addLeak () {
var leakObject = new LeakObject();
window.onresize = function () {
console.log(leakObject.value.length);
};
}
function releaseLeak () {
window.onresize = null;
}
</script>
</head>
<body>
<button onclick="addLeak()">Add Leak</button>
<button onclick="releaseLeak()">Release Leak</button>
</body>
</html>
给window.onresize赋值的匿名函数中用到了变量leakObject，只要这个函数还有人引用（比如window.onresize），leakObject不会被自动回收。想要修复内存泄漏的问题，就需要将全局监听删除。对于window.onresize的形式，直接将window.onresize赋值为null；对于window.addEventListener的形式，需要将匿名函数用变量保存起来（比如listener），然后调用window.removeEventListener(listener)。
定时器
有两类定时器：
- setInterval 一般用于定时请求后台数据，刷新界面
- requestAnimationFrame 一般用于动画，IE10或以上版本才支持。虽然setInverval也能用于实现动画功能，但requestAnimationFrame更有优势，比如浏览器切换到其他Tab页后，动画会被暂停
定时器示例如下3-setInterval：
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';
function LeakObject () {
this.value = new Array(1024 * 1024).join('X');
}
function addLeak () {
var leakObject = new LeakObject();
window._intervalId = setInterval(function () {
console.log(leakObject.value.length);
}, 1000);
}
function releaseLeak () {
clearInterval(window._intervalId);
window._intervalId = null;
}
</script>
</head>
<body>
<button onclick="addLeak()">Add Leak</button>
<button onclick="releaseLeak()">Release Leak</button>
</body>
</html>
计时器的回调函数中用到了leakObject，所以只要这个回调函数有人引用（window对象有引用），leakObject就不会被回收，修复方法是调用clearInterval、cancelAnimationFrame清除定时器。
定时器引起的内存泄漏，在内存快照中搜索不出来，但从内存分配中能看到。如下图，点击2次Add Leak按钮后，内存分配为2M，但搜索不到LeakObject：
刚才的全局监听器和定时器都是由于闭包（Clousure）中引用了外部变量导致的内存泄漏，这里有个更明显的由于闭包引起的内存泄漏的例子4-closure：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
'use strict';
function LeakObject () {
this.value = new Array(1024 * 1024).join('X');
}
var leakObject = null;
function addLeak() {
var oldObj = leakObject;
leakObject = {
leakObj: new LeakObject(),
closure: function () {
console.log(oldObj);
}
};
}
function releaseLeak () {
leakObject = null;
}
</script>
</head>
<body>
<button onclick="addLeak()">Add Leak</button>
<button onclick="releaseLeak()">Release Leak</button>
</body>
</html>
上面addLeak函数的代码相当于如下代码，也就是构造了一个对象链表：
function addLeak() {
var oldObj = leakObject;
leakObject = {
leakObj: new LeakObject(),
oldObj: oldObj
};
}
不停的调用addLeak函数后，会引发一连串的内存泄漏：
最后，IE6、7在对象相互引用时也会存在内存泄漏，相信现在没人用IE6、7了，这里就不介绍了。
