摘要：的內(nèi)存管理是那些被稱作垃圾回收語言當(dāng)中的一員。垃圾回收與內(nèi)存泄漏垃圾回收，簡稱。反例循環(huán)多次觸發(fā)，效率太低在舊的瀏覽器上會導(dǎo)致內(nèi)存泄漏正解綁定事件的元素是不能在時(shí)被清理的，應(yīng)該在之前取消事件綁定。

首先我們需要理解，內(nèi)存是什么。簡單來講，內(nèi)存存儲了計(jì)算機(jī)運(yùn)行過程的需要的全部數(shù)據(jù)，也就是計(jì)算機(jī)正在使用的全部數(shù)據(jù)。我們需要合理的使用內(nèi)存，防止內(nèi)存被大量無用數(shù)據(jù)占用，同時(shí)也要防止訪問和修改與當(dāng)前程序無關(guān)的內(nèi)存區(qū)域。內(nèi)存主要包括以下幾個部分: 內(nèi)核數(shù)據(jù)區(qū)域，棧區(qū)，共享庫映像，堆區(qū)，可讀寫區(qū)域，只讀區(qū)域。學(xué)習(xí)javascript，我們不需要理解內(nèi)存和cache，內(nèi)存和I/O之間具體工作原理，但我們需要了解掌握如何合理的使用內(nèi)存，合理的分配釋放內(nèi)存。

Javascript 是那些被稱作垃圾回收語言當(dāng)中的一員。垃圾回收語言通過周期性地檢查那些之前被分配出去的內(nèi)存是否可以從應(yīng)用的其他部分訪問來幫助開發(fā)者管理內(nèi)存。換句話說，當(dāng)計(jì)算機(jī)發(fā)現(xiàn)有的內(nèi)存已經(jīng)不能被訪問到了，就會把它們標(biāo)記為垃圾。開發(fā)者只需要知道一塊已分配的內(nèi)存是否會在將來被使用，而不可訪問的內(nèi)存可以通過算法確定并標(biāo)記以便返還給操作系統(tǒng)。

js中的變量除了6個基本類型以外，其余的都是對象。也就說基本類型在賦值是傳遞的是值，也就是原來數(shù)據(jù)的一份拷貝。基本類型包括number、string、boolean、symbol、null、undefined.
用2個例子來理解一下：

var a = 10;  //基本類型
var b = a;   //a把10拷貝一份，把這個拷貝給b
a = 20;  //修改了a，不影響a的拷貝
console.log(a);  //20
console.log(b);  //10

var a = {num: 20};  //不是基本類型
var b = a;   //這里沒有任何拷貝工作，b指向和a完全一致的同一塊內(nèi)存
b.num = 15;  //由于b和a指向同一塊內(nèi)存，所以b.num修改了等同于a.num修改了
console.log(a.num); //15
console.log(b.num); //15

//進(jìn)一步理解
b = {age: 10};  //等號右邊定義了一個新的對象，產(chǎn)生的新的內(nèi)存分配，此時(shí)b指向了這塊新的內(nèi)存，a還是指向原來那塊內(nèi)存
console.log(a);  //{num: 15}
console.log(b);  //{age: 10}

值得強(qiáng)調(diào)的是：在函數(shù)參數(shù)傳遞的時(shí)候和返回值時(shí)一樣遵守這個傳遞規(guī)則，這是構(gòu)成閉包的基礎(chǔ)條件

//一個反例
var num1 = 10;
var num2 = 20;
function swap(a, b){
    var temp = a;
    a = b;
    b = temp;
}
swap(num1, num2);
console.log(num1);  //10
console.log(num2);  //20

以上代碼不能如愿的把2個傳入變量的值交換，因?yàn)榛绢愋驮趨?shù)傳遞時(shí)也是值傳遞，及a,b是num1,num2的拷貝，不是num1和num2本身。當(dāng)然實(shí)現(xiàn)交換的方法很多，在不引入第三個變量情況下，不用多帶帶寫一個函數(shù)。

//實(shí)現(xiàn)交換a,b
//方法1：
var temp = a;
a = b;
b =temp;

//方法2：
a = a + b;
b = a - b;
a = a - b;

//方法3：
a = [b, b = a][0];

//方法4（僅適用于整數(shù)交換）：
a = a ^ b; // ^表示異或運(yùn)算
b = a ^ b; 
a = a ^ b; 

//方法5：
[a, b] = [b, a]; //解構(gòu)賦值

var inc = function(){
    var x = 0;
    return function(){  //返回一個非基本類型
        console.log(x++);
    };
};
inc1 = inc();  //inc1是閉包內(nèi)匿名函數(shù)的引用，由于該引用存在，匿名函數(shù)引用計(jì)數(shù)不為0，所以inc作用域?qū)?yīng)的內(nèi)存不能釋放，閉包形成
inc1();  //0
inc1();  //1

當(dāng)對象的屬性是對象的時(shí)候，簡單地賦值導(dǎo)致改屬性傳遞的是另一個對象屬性的引用，這樣的拷貝是淺拷貝，存在安全風(fēng)險(xiǎn)。我們應(yīng)該遞歸的拷貝對象屬性的每個對象，形成深拷貝。方法如下：

//淺拷貝與深拷貝
var o = {
    name: "Lily",
    age: 10,
    addr:{
        city: "Shenzheng",
        province: "Guangdong"
    },
    schools: ["primaryS", "middleS", "heightS"]
};
var newOne = copy(o);
console.log(o);   //Object {name: "Lily", age: 10, addr: Object}
console.log(newOne);   //Object {name: "Lily", age: 10, addr: Object}

newOne.name = "Bob";
console.log(newOne.name);  //"Bob"
console.log(o.name);   //"Lily"

newOne.addr.city = "Foshan";
console.log(newOne.addr.city);   //"Foshan"
console.log(o.addr.city);   //"Foshan"

function copy(obj){
    var obj = obj || {};
    var newObj = {};
    for(prop in obj){
        if(!obj.hasOwnProperty(prop)) continue;
        newObj[prop] = obj[prop];  //當(dāng)obj[prop]不是基本類型的時(shí)候，這里傳的時(shí)引用
    }
    return newObj;
}

var newOne = deepCopy(o);
console.log(o);   //Object {name: "Lily", age: 10, addr: Object}
console.log(newOne);   //Object {name: "Lily", age: 10, addr: Object}

newOne.name = "Bob";
console.log(newOne.name);  //"Bob"
console.log(o.name);   //"Lily"

newOne.addr.city = "Foshan";
console.log(newOne.addr.city);   //"Foshan"
console.log(o.addr.city);   //"Shenzheng"

newOne.schools[0] = "primatrySchool";
console.log(newOne.schools[0]);   //"primatrySchool"
console.log(o.schools[0]);   //"primatryS"

function deepCopy(obj){
    var obj = obj || {};
    var newObj = {};
    deeply(obj, newObj);
    
    function deeply(oldOne, newOne){
        for(var prop in oldOne){
            if(!oldOne.hasOwnProperty(prop)) continue;
            if(typeof oldOne[prop] === "object" && oldOne[prop] !== null){
                newOne[prop] = oldOne[prop].constructor === Array ? [] : {};
                deeply(oldOne[prop], newOne[prop]);
            }
            else
                newOne[prop] = oldOne[prop];
        }
    }
    return newObj;
}

不同的變量定義方式，會導(dǎo)致變量不能被刪除，內(nèi)存無法釋放。

// 定義三個全局變量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
    global_fromfunc = 3; // 反面教材
}());

// 試圖刪除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true

// 測試該刪除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

很明顯，通過var定義的變量無法被釋放。

垃圾回收(Garbage Collection)，簡稱GC。簡單來講，GC就是把內(nèi)存中不需要的數(shù)據(jù)釋放了，這樣這部分內(nèi)存就可以存放其他東西了。在javascript中，如果一個對象不再被引用，那么這個對象就會被GC回收。具體回收策略包括以下3種：

當(dāng)從window節(jié)點(diǎn)遍歷DOM樹不能遍歷到某個對象，那么這個對象就會被標(biāo)記為沒用的對象。由于回收機(jī)制是周期性執(zhí)行的，這樣，當(dāng)下一個回收周期到來時(shí)，這個對象對應(yīng)的內(nèi)存就會被釋放。

當(dāng)系統(tǒng)中定義了一個對象后，對于這一塊內(nèi)存，javascript會記錄有多少個引用指向個部分內(nèi)存，如果這個數(shù)為零，則這部分內(nèi)存會在下一個回收周期被釋放。

就好比上一個例子中，利用delete關(guān)鍵字刪除變量或?qū)傩?，達(dá)到釋放內(nèi)存的目的。分一下幾種情況：

//釋放一個對象
obj = null;

//釋放是個對象屬性
delete obj.propertyName;
delete globalVariable;  //沒有用var聲明的變量是window的屬性，用delete釋放。

//釋放數(shù)組
array.length = 0;

//釋放數(shù)組元素
array.splice(2,2);  //刪除并釋放第三個元素起的2個元素

不過需要注意的是， 這幾個GC策略是同時(shí)作用的：

var o1 = {};  //開辟一塊內(nèi)存放置對象，并用o1指向它
var o2 = o1;  //o2指向與o1同一個內(nèi)存區(qū)域
console.log(o1);  //{}
console.log(o2);  //{}
o2 = null;  //標(biāo)記o2為沒用的對象
console.log(o2);  //null
console.log(o1);  //{}  由于還有o1指向這個內(nèi)存區(qū)域，引用計(jì)數(shù)不為零，所以內(nèi)存并沒有被釋放
o1 = null;  //引用計(jì)數(shù)為0， 內(nèi)存釋放

如果你訪問了已經(jīng)被回收了的內(nèi)存，會發(fā)生不可預(yù)計(jì)的嚴(yán)重后果。比如一段內(nèi)存被釋放了，可能里面的值就不是原來的值了，你還要拿來用那不是自己找錯誤嗎？更嚴(yán)重的就是你修改了其他程序的數(shù)據(jù)?。。∥覀儗⑦@樣的變量叫做野指針(wild pointer)。為了避免這樣的也只能出現(xiàn)，也為了節(jié)省計(jì)算機(jī)資源，我們需要防止內(nèi)存泄露(memory leak)。

內(nèi)存泄漏也稱作存儲滲漏，用動態(tài)存儲分配函數(shù)動態(tài)開辟的空間，在使用完畢后未釋放，結(jié)果導(dǎo)致一直占據(jù)該內(nèi)存單元，直到程序結(jié)束。簡單來說就是該內(nèi)存空間使用完畢之后未回收。

內(nèi)存泄露是每個開發(fā)者最終都不得不面對的問題。即便使用自動內(nèi)存管理的語言，你還是會碰到一些內(nèi)存泄漏的情況。內(nèi)存泄露會導(dǎo)致一系列問題，比如：運(yùn)行緩慢，崩潰，高延遲，甚至一些與其他應(yīng)用相關(guān)的問題。

清除所以子元素用innerHTML=""替代removeChild(),因?yàn)樵趕IEve中監(jiān)測的結(jié)果是用removeChild無法有效地釋放dom節(jié)點(diǎn)。

//反例
var parent = document.getElementById("parent");
var first = parent.firstChild();
while(first){  //循環(huán)多次觸發(fā)reflow，效率太低
    parent.removeChild(first);  //在舊的瀏覽器上會導(dǎo)致內(nèi)存泄漏
    first = parent.firstChild();
}

//正解
document.getElementById("parent").innerHTML = “”;

綁定事件的元素是不能在remove時(shí)被清理的，應(yīng)該在remove之前取消事件綁定。不過更好的辦法是用事件委托的方式綁定事件。

var ele = document.getElementById("eleID");
ele.onclick = function fun(){
    //Do stuff here
}
//...
ele.onclick = null;  //刪除元素前取消所有事件，jQuery中也是在刪除節(jié)點(diǎn)前利用removeEventListen去除了對應(yīng)事件
ele.parentNode.removeChild(ele);

意外的全局變量，會使得實(shí)際函數(shù)結(jié)束就應(yīng)該釋放的內(nèi)存保留下來，造成資源浪費(fèi)，包括以下兩種情況：

在嚴(yán)格模式下編寫代碼可以避免這個問題

//情況一: 函數(shù)中沒有用var聲明的變量
function fun1(){
    name = "Mary";   //全局變量
}
fun1();

//情況二: 構(gòu)造函數(shù)沒用new關(guān)鍵字調(diào)用
function Person(name){
    this.name = name；
}
Person("Mary");   //函數(shù)內(nèi)定義全局變量

定時(shí)器中的變量定義，會在每次執(zhí)行函數(shù)的時(shí)候重復(fù)定義變量，產(chǎn)生嚴(yán)重的內(nèi)存泄漏。

//反例
setInterval(function(){
    var ele = document.getElementById("eleID");  //改代碼毎100毫秒會重復(fù)定義該引用
    //Do stuff
}, 100);

//正解
setInterval(function(){
    var ele = document.getElementById("eleID");  //改代碼毎100毫秒會重復(fù)定義該引用
    //Do stuff
    ele = null;
}, 100);

如果閉包的作用域鏈中保存著一個DOM對象或者ActiveX對象，那么就意味著該元素將無法被銷毀:

//反例
//不妨認(rèn)為這里的上下文是window
function init(){
    var el = document.getElementById("MyElement"); //這是一個DOM元素的引用，非基本類型
    el.onclick = function(){  //el.onclick是function匿名函數(shù)的引用
         alert(el.innerHTML);  //funciton中訪問了這個作用域以外的DOM元素引用el，導(dǎo)致el不能被釋放
    }
 }
 init();

 //正解
 function init(){
    var el = document.getElementById("MyElement"); //這是一個DOM元素的引用，是非基本類型
    var text = el.innerHTML; //字符串，是基本類型,解決alert(el.innerHTML)不能正常工作問題
    el.onclick = function(){  //el.onclick是function匿名函數(shù)的引用
         alert(text);  //var聲明的text是基本類型，不必釋放
    }
    el = null;  //手動釋放，但會導(dǎo)致alert(el.innerHTML)不能正常工作
 }
 init();

 //如果函數(shù)結(jié)尾要return el，用以下方法釋放el
 //正解
function init(){
    var el = document.getElementById("MyElement"); //這是一個DOM元素的引用，是非基本類型
    var text = el.innerHTML; //字符串，是基本類型，解決alert(el.innerHTML)不能正常工作問題
    el.onclick = function(){  //el.onclick是function匿名函數(shù)的引用
         alert(text);  //var聲明的text是基本類型，不必釋放
    }
    try{
        return el;
    } finally {
        el = null;  //手動釋放，但會導(dǎo)致alert(el.innerHTML)不能正常工作
    }
 }
 init();

通過createElement，createTextNode等方法創(chuàng)建的元素會在寫入DOM后被釋放

function create() {
    var parent = document.getElementById("parent");
    for (var i = 0; i < 5000; i++) {
        var el = document.createElement("div");
        el.innerHTML = "test";
        gc.appendChild(el);  //這里釋放了內(nèi)存
    }
}

循環(huán)引用導(dǎo)致引用計(jì)數(shù)永遠(yuǎn)不為0，內(nèi)存無法釋放：

//構(gòu)成一個循環(huán)引用
var o1 = {name: "o1"};
var o2 = {name: "o2"};
o1.pro = o2;
o2.pro = o1;

//這種情況需要手動清理內(nèi)存，在不需要的時(shí)候把對象置為null或刪除pro屬性