技術標籤：JSjavascriptes6

前言

談及尾呼叫，需先了解資料結構：棧、呼叫棧以及呼叫偵

棧

棧是一種遵從後進先出(LIFO)原則的有序集合，新元素都靠近棧頂，舊元素都接近棧底。

想象一下，如餐廳裡面堆放的盤子(棧)，一開始放的都在下面(先進)，後面放的都在上面(後進)，洗盤子的時候先從上面開始洗(先出)。

呼叫棧

1. 呼叫棧是一種棧結構的資料，它是由呼叫偵組成的。
2. 呼叫棧記錄了函式的執行順序和函式內部變數等資訊。

呼叫偵

每個進入到呼叫棧中的函式，都會分配到一個單獨的棧空間，稱為“呼叫偵”。
在呼叫棧中每個“呼叫偵”都對應一個函式，最上方的呼叫幀稱為“當前幀”，呼叫棧是由所有的呼叫偵形成的。

函式變數等資訊會被呼叫偵儲存起來，所以呼叫偵中的變數不會被垃圾收集器回收。

當函式巢狀的層級比較深了，呼叫棧中的呼叫偵比較多的時候，這些資訊對記憶體消耗是非常大的。

針對這種情況除了我們要儘量避免函式層級巢狀的比較深之外，ES6提供了“尾呼叫優化”來解決呼叫偵過多，引起的記憶體消耗過大的問題。

尾呼叫

尾呼叫指的是：函式的最後一步是呼叫另一個函式

尾呼叫優化優化了什麼？

尾呼叫用來刪除外層無用的呼叫偵，只保留內層函式的呼叫偵，來節省瀏覽器的記憶體。

下面這個例子呼叫棧中的呼叫偵一直只有一項，如果不使用尾呼叫的話會出現三個呼叫偵：

a() // 1 新增a到呼叫棧
function a(){
    return b(); // 在呼叫棧中刪除a 新增b
}
function b(){
    return c() // 刪除b 新增c
}
 

防止爆棧：

瀏覽器對呼叫棧都有大小限制，在ES6之前遞迴比較深的話，很容易出現“爆棧”問題(stack overflow)。

現在可以使用“尾呼叫優化”來寫一個“尾遞迴”，只儲存一個呼叫偵，來防止爆棧問題。

注意：

1. 只有不再用到外層函式的內部變數，內層函式的呼叫幀才會取代外層函式的呼叫幀。

如果要使用外層函式的變數，可以通過引數的形式傳到內層函式中

function a(){
    var aa = 1;
    let b = val => aa + val // 使用了外層函式的引數aa
    return b(2) // 無法進行尾呼叫優化
}

2. 尾呼叫優化只在嚴格模式下開啟，非嚴格模式是無效的。
3. 如果環境不支援“尾呼叫優化”，程式碼還可以正常執行，是無害的！

題外話

最近在看vue原始碼，裡面很多尾呼叫方法，比如compile方法實際上返回的是makeUnlinkFn(vm, dirs)，而makeUnlinkFn為方法名。大家感興趣的話，可以看看vue原始碼，從中可以學到不少東西