意外的全局變量

js中如果不用 var 聲明變量,該變量將被視為 window 對象(全局對象)的屬性,也就是全局變量.

function foo(arg) {
bar = "this is a hidden global variable";
}

// 上面的函數(shù)等價于
function foo(arg) {
window.bar = "this is an explicit global variable";
}
所以,你調(diào)用完了函數(shù)以后,變量仍然存在,導(dǎo)致泄漏.

如果不注意 this 的話,還可能會這么漏:

function foo() {
this.variable = "potential accidental global";
}

// 沒有對象調(diào)用foo, 也沒有給它綁定this, 所以this是window
foo();
你可以通過加上 'use strict' 啟用嚴(yán)格模式來避免這類問題, 嚴(yán)格模式會組織你創(chuàng)建意外的全局變量.

被遺忘的定時器或者回調(diào)

var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
這樣的代碼很常見, 如果 id 為 Node 的元素從 DOM 中移除, 該定時器仍會存在, 同時, 因為回調(diào)函數(shù)中包含對 someResource 的引用, 定時器外面的 someResource 也不會被釋放.

沒有清理的DOM元素引用

var elements = {
button: document.getElementById('button'),
image: document.getElementById('image'),
text: document.getElementById('text')
};

function doStuff() {
image.src = 'http://some.url/image';
button.click();
console.log(text.innerHTML);
}

function removeButton() {
document.body.removeChild(document.getElementById('button'));

// 雖然我們用removeChild移除了button, 但是還在elements對象里保存著#button的引用
// 換言之, DOM元素還在內(nèi)存里面.

}
閉包

先看這樣一段代碼:

var theThing = null;
var replaceThing = function () {
var someMessage = '123'
theThing = {
someMethod: function () {
console.log(someMessage);
}
};
};
調(diào)用 replaceThing 之后, 調(diào)用 theThing.someMethod , 會輸出 123 , 基本的閉包, 我想到這里應(yīng)該不難理解.

解釋一下的話, theThing 包含一個 someMethod 方法, 該方法引用了函數(shù)中的 someMessage 變量, 所以函數(shù)中的 someMessage 變量不會被回收, 調(diào)用 someMethod 可以拿到它正確的 console.log 出來.

接下來我這么改一下:

var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var someMessage = '123'
theThing = {
longStr: new Array(1000000).join('*'), // 大概占用1MB內(nèi)存
someMethod: function () {
console.log(someMessage);
}
};
};
我們先做一個假設(shè), 如果函數(shù)中所有的私有變量, 不管 someMethod 用不用, 都被放進(jìn)閉包的話, 那么會發(fā)生什么呢.

第一次調(diào)用 replaceThing , 閉包中包含 originalThing = null 和 someMessage = '123' , 我們設(shè)函數(shù)結(jié)束時, theThing 的值為 theThing_1 .

第二次調(diào)用 replaceThing , 如果我們的假設(shè)成立, originalThing = theThing_1 和 someMessage = '123' .我們設(shè)第二次調(diào)用函數(shù)結(jié)束時, theThing 的值為 theThing_2 .注意, 此時的 originalThing 保存著 theThing_1 , theThing_1 包含著和 theThing_2 截然不同的 someMethod , theThing_1 的 someMethod 中包含一個 someMessage , 同樣如果我們的假設(shè)成立, 第一次的 originalThing = null 應(yīng)該也在.

所以, 如果我們的假設(shè)成立, 第二次調(diào)用以后, 內(nèi)存中有 theThing_1 和 theThing_2 , 因為他們都是靠 longStr 把占用內(nèi)存撐起來, 所以第二次調(diào)用以后, 內(nèi)存消耗比第一次多1MB.

如果你親自試了(使用Chrome的Profiles查看每次調(diào)用后的內(nèi)存快照), 會發(fā)現(xiàn)我們的假設(shè)是不成立的, 瀏覽器很聰明, 它只會把 someMethod 用到的變量保存下來, 用不到的就不保存了, 這為我們節(jié)省了內(nèi)存.

但如果我們這么寫:

var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing)
console.log("hi");
};
var someMessage = '123'
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function () {
console.log(someMessage);
}
};
};
unused 這個函數(shù)我們沒有用到, 但是它用了 originalThing 變量, 接下來, 如果你一次次調(diào)用 replaceThing , 你會看到內(nèi)存1MB 1MB的漲.

也就是說, 雖然我們沒有使用 unused , 但是因為它使用了 originalThing , 使得它也被放進(jìn)閉包了, 內(nèi)存漏了.

強(qiáng)烈建議讀者親自試試在這幾種情況下產(chǎn)生的內(nèi)存變化.

這種情況產(chǎn)生的原因, 通俗講, 是因為無論 someMethod 還是 unused , 他們其中所需要用到的在 replaceThing 中定義的變量是保存在一起的, 所以就漏了.