與做用域相關的閉包、內存泄漏、this

做用域是 JavaScript 裏的一個很是重要和基礎的概念. 不少人認爲本身理解了做用域, 可是在遇到閉包時卻說不出個因此然, 甚至不能識別出來.

閉包也是個很是重要, 且常常被誤解的概念. 然而閉包就是基於做用域書寫代碼時所產生的天然結果. 假若拋開做用域講閉包, 那都是耍流氓. 閉包能夠說在平時的代碼裏隨處可見, 但真正讓閉包發揮積極做用的作法是隔離做用域、模塊函數等.

做用域機制是不能直接查看的, 咱們首先模擬一個場景來儘量的說明做用域這套規則, 而後經過代碼片斷和開發者工具進行驗證.

遊戲存檔

想必你們都有玩過遊戲的經驗. 剛開始的時候, 也就是第一關, 難度比較簡單. 到了第二關的時候, 就在第一關的基礎上加些難纏的角色, 難度相應地加大了. 關卡越是日後, 難纏的角色也就會愈來愈多.

可在遊戲的時候, 因爲各類緣由, 每每咱們不可能一會兒經過全部的關卡, 因此遊戲提供了存檔的功能. 下次再玩的時候能夠從存檔裏續上. 若是不想這樣, 徹底能夠從頭玩起.

爲何咱們能從存檔裏直接跳到上次的關卡, 很顯然, 這裏是有記錄存儲的. 好比第一關有個場景食人花和海王, 第二關又多了個邪惡人等等. 每一個關卡都會記錄該關卡新增的角色或場景同時也會存儲以前關卡的記錄. 這樣就保證了不一樣的存檔的獨立性, 不管在哪一個關卡存檔, 下次也定會續上以前的地方. 固然了, 咱們也能夠回到上一個關卡.

( 海王之雄風&敵人之邪惡)

幾個知識點

結合上面的場景, 咱們再回頭看看如下幾個知識點.

1. 標識符: 變量、函數、屬性的名字, 或者函數的參數.

2. 每一個函數都有本身的執行環境. 當執行流進入一個函數時, 函數的環境就會被推入一個環境棧中. 而在函數執行後, 棧將其環境彈出, 把控制權返回以前的執行環境.

3. 執行環境定義了變量或函數有權訪問的其它數據. 每一個執行環境都有一個與之關聯的變量對象, 環境中定義的全部變量和函數都保存在這個對象中. 某個執行環境中的全部代碼執行完畢後, 該環境被銷燬, 保存在其中的全部變量和函數定義也隨之銷燬.

4. 當代碼在一個環境中執行時, 會建立變量對象的一個做用域鏈.

5. 做用域鏈是保證對執行環境有權訪問的全部變量和函數的有序訪問. 做用域的前端始終都是當前執行的代碼所在的變量對象. 若是這個環境是函數, 則將其活動對象做爲變量對象. 活動對象在最開始只包含一個變量, 即 arguments 對象. 做用域鏈中的下一個變量對象來自包含(外部)環境. 全局執行環境的變量對象始終都是做用域鏈的最後一個對象.

6. 當某個環境中爲了讀取或寫入而引入一個標識符時, 必須經過搜索來肯定該標識符來肯定該標識符實際表明什麼. 搜索過程從做用域鏈的前端開始, 向上逐級查詢與給定名字匹配的標識符. 若是在局部環境中找到了該標識符, 搜索過程中止, 變量就緒. 若是在局部環境中沒有找到該變量名, 則繼續沿做用域鏈向上搜索. 搜索過程將一直追溯到全局環境的變量對象. 若是在全局環境中也沒有找到這個標識符, 則意味着該變量還沒有聲明.

7. 做用域鏈本質上時一個指向變量對象的指針列表, 它只引用但實際不包含變量對象.

若是咱們把以上的幾個知識點串起來, 這就是所謂的做用域鏈規則了. 上圖解釋一波.( arguments 應該加到變量對象裏的, 圖中沒體現, 疏忽)

圖解做用域

如今咱們從最後兩行提及,

var outer = outerFn(10);
var inner = outer(10);
複製代碼

執行 outer = outerFn(10) 後, outer 擁有了返回函數的引用. outer(10) 在執行的時候它會建立 屬於它本身 的做用域鏈, 這裏包含函數所處外部環境的變量對象.

在讀取 initial 變量時, 在 Inner 變量對象中沒有檢索到, 它會沿着做用域鏈向上搜索, 在 outer 變量對象裏找到了該標識符, 搜索過程中止, 變量就緒.

函數在定義的時候就已經決定了以後執行時, 做用域裏將包含什麼. 這也解釋了, 即便咱們把定義在函數內部的函數扔在外邊執行也能訪問到函數內部的變量. 這和內部函數在哪執行沒有半毛錢關係.

爲何強調 屬於它本身 的呢?

function outer() {
    var num = 0;
    return function inner() {
        return num++;
    }
}
let innerFn_1 = outer();
let a_1 = innerFn_1()
let innerFn_2 = outer();
let a_2 = innerFn_2();

let a_1_1 = innerFn_1();
let a_2_2 = innerFn_2();
複製代碼

innerFn_1 和 innerFn_2 都屬於本身的做用域鏈, 而 a_1 和 a_2 則分別在 innerFn_1 和 innerFn_2 上建立了屬於本身的做用域鏈. 因此它們函數裏的 num 是屬於不一樣做用域鏈裏的變量. 但對於 a_1 和 a_1_1 來講它們都是基於 innerFn_1, 擁有同一 outer 變量對象, num 天然也是同一個, 因此會累加. 同理 a_2 和 a_2_2.

若是理解了這個, 那麼面試常考的一題就小菜一碟了.

for(var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i*1000)
}
複製代碼

重點是執行的時候纔會建立變量對象的一個做用域鏈.

閉包是什麼?

當函數能夠記住並訪問所在的做用域, 即便函數是在當前做用域以外執行, 這時就產生了閉包. 這就和以前提到的遊戲存檔差很少.

好了, 扔幾個閉包出來鞏固一下.

function outer_1() {
    var a = 'hello world';
    function inner() {
        console.log(a)
    }
    outer_2(inner)
}
function outer_2(fn) {
    fn()
}
複製代碼

這裏也有閉包.

var a = new array(99999999);
function b() {
    console.log(b)
}
b()
window.addEventListener('click', function() {
    console.log('hello world')
})
複製代碼

DevTools裏直觀看閉包

還有開頭所說的能夠結合開發者工具直觀地看一下, 一張動態圖解釋一切.

內存泄漏

閉包之因此能成爲閉包, 是由於它記錄了函數所在的做用域. 現主流的自動垃圾收集機制正由於閉包的這個特色而不能釋放內存. 閉包的濫用會致使致使內存能分配的空間變少, 最終崩潰.

正常來講, 函數在執行的過程當中, 局部變量會被分配相應的內存空間, 以便存儲它們的值, 直至函數執行結束. 此時局部變量佔有的空間會被釋放以供未來使用.

常說的回收機制之一, 標記清除, 它的工做原理是, 當變量進入執行環境時, 儲存在內存中的全部變量都會被加上標記(至於什麼標記咱們不關心), 而後找到 環境中的變量 以及 被環境中引用的變量, 把它們以前加的標記給去掉. 而剩下的被標記的變量將被視爲 準備 刪除的變量. 最後, 垃圾收集器找出再也不繼續使用的變量, 釋放其佔用的內存. 因此, 一旦數據再也不被須要, 應解除引用, 將其值設置爲null.

outer = null;
inner = null;
複製代碼

內部函數的執行環境會保存着外部環境活動對象的引用, 內部函數被扔出去後, 就意味着外部環境中的變量不能被銷燬了.

this對象

執行環境裏記錄的不僅是這些, 它也記錄了函數調用棧、函數調用方式等. this 和做用域有關係, 但不是大家想象的那種關係. 每一個函數在被調用時都會自動取得兩個特殊變量: this 和 arguments. 內部函數在搜索這兩個變量時, 只會搜索到其活動對象爲止(即當前變量對象). 所以永遠不可能直接訪問到外部函數中的這兩個變量. 除非咱們把外部做用域中的 this 對象保存在一個閉包可以訪問到的變量裏.

// 很常見是否是😂
let obj = {
    a: function() {
        var self = this;
        return function() {
            console.log(self)
        }
    }
}
複製代碼

函數內部的 this 在函數執行時才正式被賦予相應的值, 因此說函數的調用位置很關鍵. 能夠這麼說, 誰 直接 調用了這個函數, this 就指向了誰. 若是不是對象在直接調用這個函數, 咱們可通通認爲是 undefined, 非嚴格模式下瀏覽器環境就是 window. 若是真想知道爲何, 能夠直接看規範(神煩).

'use strict'
function a() {
    console.log(this)
}
var b = {
    a: function() {
        console.log(this);
    },
    b: function() {
        return a;
    }
}
let b_a = b.a;
a();    //1. undefined;
b_a();  //2. undefined;
b.a();  //3. {a: f, b: f};
b.b()();    //4. undefined;
(true && b.a)() //5. undefined;
new a();    //6. {}
b.call(b);  //7. {a: f, b: f};
複製代碼

從 1 ~ 6, 咱們看看哪一個對象直接調用了該函數.

第 1 個沒找到調用對象, 就是個普通函數調用. 第 2 個通過 b_a = b.a 賦值操做後, 返回的就是那個普通函數, 就是一普通的函數調用. 第 3 個很直接, 就是 b 這個對象了. 第 4 個是個閉包, 首先 this 只在當前活動對象裏找 this 對象, 不知道是哪一個對象, 但確定不會是 b. 第 5 個和第 2 個是一個道理. 第 6 個吧, 貌似不算是函數調用了吧, 不過咱們知道, this 是指向新建立的空對象. 第 7個就更直接了, 人家都指名道姓就差喊出來了.

this 綁定對象的幾條準則貌似在我這裏就剩一條了😌.