JS 調(diào)用棧機制與 ES6 尾調(diào)用優(yōu)化介紹

jemygraw 發(fā)布于2019-05-22 19:43 / 1077人閱讀

摘要：在調(diào)用棧中每個調(diào)用偵都對應一個函數(shù)，最上方的調(diào)用幀稱為當前幀，調(diào)用棧是由所有的調(diào)用偵形成的。我們應該在日常的中，有意識的使用的尾調(diào)用優(yōu)化，來減少調(diào)用棧的長度，節(jié)省客戶端內(nèi)存。

調(diào)用棧的英文名叫做Call Stack，大家或多或少是有聽過的，但是對于js調(diào)用棧的工作方式以及如何在工作中利用這一特性，大部分人可能沒有進行過更深入的研究，這塊內(nèi)容可以說對我們前端來說就是所謂的基礎知識，咋一看好像用處并沒有很大，但掌握好這個知識點，就可以讓我們在以后可以走的更遠，走的更快！

博客、前端積累文檔、公眾號、GitHub

數(shù)據(jù)結構：棧

調(diào)用棧是什么？用來做什么？

調(diào)用棧的運行機制

調(diào)用棧優(yōu)化內(nèi)存

調(diào)用棧debug大法

數(shù)據(jù)結構：棧

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

生活中的栗子，幫助一下理解：

餐廳里面堆放的盤子(棧)，一開始放的都在下面(先進)，后面放的都在上面(后進)，洗盤子的時候先從上面開始洗(先出)。

調(diào)用棧是什么？用來做什么？

調(diào)用棧是一種棧結構的數(shù)據(jù)，它是由調(diào)用偵組成的。

調(diào)用棧記錄了函數(shù)的執(zhí)行順序和函數(shù)內(nèi)部變量等信息。

調(diào)用棧的運行機制

機制：

程序運行到一個函數(shù)，它就會將其添加到調(diào)用棧中，當從這個函數(shù)返回的時候，就會將這個函數(shù)從調(diào)用棧中刪掉。

看一下例子幫助理解：

// 調(diào)用棧中的執(zhí)行步驟用數(shù)字表示
printSquare(5); // 1 添加
function printSquare(x) {
    var s = multiply(x, x); // 2 添加 => 3 運行完成，內(nèi)部沒有再調(diào)用其他函數(shù)，刪掉
    console.log(s); // 4 添加 => 5 刪掉
    // 運行完成 刪掉printSquare
}
function multiply(x, y) {
    return x * y;
}

調(diào)用棧中的執(zhí)行步驟如下(刪除multiply的步驟被省略了)：

調(diào)用偵：

每個進入到調(diào)用棧中的函數(shù)，都會分配到一個多帶帶的棧空間，稱為“調(diào)用偵”。

在調(diào)用棧中每個“調(diào)用偵”都對應一個函數(shù)，最上方的調(diào)用幀稱為“當前幀”，調(diào)用棧是由所有的調(diào)用偵形成的。

找到一張圖片，調(diào)用偵：

調(diào)用棧優(yōu)化內(nèi)存

調(diào)用棧的內(nèi)存消耗：

如上圖，函數(shù)的變量等信息會被調(diào)用偵保存起來，所以調(diào)用偵中的變量不會被垃圾收集器回收。

當函數(shù)嵌套的層級比較深了，調(diào)用棧中的調(diào)用偵比較多的時候，這些信息對內(nèi)存消耗是非常大的。

針對這種情況除了我們要盡量避免函數(shù)層級嵌套的比較深之外，ES6提供了“尾調(diào)用優(yōu)化”來解決調(diào)用偵過多，引起的內(nèi)存消耗過大的問題。

何謂尾調(diào)用：

尾調(diào)用指的是：函數(shù)的最后一步是調(diào)用另一個函數(shù)。

function f(x){
  return g(x); // 最后一步調(diào)用另一個函數(shù)并且使用return
}
function f(x){
  g(x); // 沒有return 不算尾調(diào)用 因為不知道后面還有沒有操作
  // return undefined; // 隱式的return
}

尾調(diào)用優(yōu)化優(yōu)化了什么？

尾調(diào)用用來刪除外層無用的調(diào)用偵，只保留內(nèi)層函數(shù)的調(diào)用偵，來節(jié)省瀏覽器的內(nèi)存。

下面這個例子調(diào)用棧中的調(diào)用偵一直只有一項，如果不使用尾調(diào)用的話會出現(xiàn)三個調(diào)用偵：

a() // 1 添加a到調(diào)用棧
function a(){
    return b(); // 在調(diào)用棧中刪除a 添加b
}
function b(){
    return c() // 刪除b 添加c
}

防止爆棧：

瀏覽器對調(diào)用棧都有大小限制，在ES6之前遞歸比較深的話，很容易出現(xiàn)“爆棧”問題(stack overflow)。

現(xiàn)在可以使用“尾調(diào)用優(yōu)化”來寫一個“尾遞歸”，只保存一個調(diào)用偵，來防止爆棧問題。

注意：

只有不再用到外層函數(shù)的內(nèi)部變量，內(nèi)層函數(shù)的調(diào)用幀才會取代外層函數(shù)的調(diào)用幀。

如果要使用外層函數(shù)的變量，可以通過參數(shù)的形式傳到內(nèi)層函數(shù)中

function a(){
    var aa = 1;
    let b = val => aa + val // 使用了外層函數(shù)的參數(shù)aa
    return b(2) // 無法進行尾調(diào)用優(yōu)化
}

尾調(diào)用優(yōu)化只在嚴格模式下開啟，非嚴格模式是無效的。

如果環(huán)境不支持“尾調(diào)用優(yōu)化”，代碼還可以正常運行，是無害的！

關于尾遞歸以及更多尾調(diào)用優(yōu)化的內(nèi)容，推薦查閱ES6入門-阮一峰

調(diào)用棧debug大法

查看調(diào)用棧有什么用

查看函數(shù)的調(diào)用順序是否跟預期一致，比如不同判斷調(diào)用不同函數(shù)。

快速定位問題/修改三方庫的代碼。

當接手一個歷史項目，或者引用第三方庫出現(xiàn)問題的時候，可以先查看對應API的調(diào)用棧，找到其中涉及的關鍵函數(shù)，針對性的修復它。

通過查看調(diào)用棧的形式，幫助我快速定位問題，修改三方庫的源碼。

如何查看調(diào)用棧

只查看調(diào)用棧：console.trace

a()
function a() {
    b();
}
function b() {
    c()
}
function c() {
    let aa = 1;
    console.trace()
}

如圖所示,點擊右側還能查看代碼位置：

bugger打斷點形式，這也是我最喜歡的調(diào)試方式：

積跬步以至千里

平時需要有意識的去做這種小的優(yōu)化(我現(xiàn)在就是)，盡量寫最佳實踐的代碼。

項目小的時候可能沒什么影響，當一個項目體量大的時候，尤其是一些小方法拼接嵌套成一個大的API輸出時，這時調(diào)用棧中對內(nèi)存的消耗將是巨大的！這種優(yōu)化也是不可小覷的，積跬步以至千里，諸君共勉！

結語

本文主要講了這幾個方面的內(nèi)容：

理解調(diào)用棧的運行機制，對代碼背后的一些執(zhí)行機制也可以更加了解，幫助我們在百尺竿頭更進一步。

我們應該在日常的code中，有意識的使用ES6的“尾調(diào)用優(yōu)化”，來減少調(diào)用棧的長度，節(jié)省客戶端內(nèi)存。

利用調(diào)用棧，對第三方庫或者不熟悉的項目，可以更快速的定位問題，提高我們debug速度。

最后：之前寫過一篇關于垃圾回收機制與內(nèi)存泄露的文章，感興趣的同學可以擴展一下。

如果這篇文章幫助到了你，歡迎點贊和關注，你的支持是對我最大的鼓勵！

博客、前端積累文檔、公眾號、GitHub

以上2019/5/19

參考資料：

JS垃圾回收機制與常見內(nèi)存泄露的解決方法

ES6入門-阮一峰

JavaScript 如何工作：對引擎、運行時、調(diào)用堆棧的概述

淺析javascript調(diào)用棧

GPU云服務器云服務器 JS調(diào)用棧機制調(diào)用棧機制 JS調(diào)用棧尾調(diào)用

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/6885.html

js 調(diào)用棧機制與ES6尾調(diào)用優(yōu)化介紹

摘要：調(diào)用棧的運行機制機制程序運行到一個函數(shù)，它就會將其添加到調(diào)用棧中，當從這個函數(shù)返回的時候，就會將這個函數(shù)從調(diào)用棧中刪掉。在調(diào)用棧中每個調(diào)用偵都對應一個函數(shù)，最上方的調(diào)用幀稱為當前幀，調(diào)用棧是由所有的調(diào)用偵形成的。 showImg(https://segmentfault.com/img/remote/1460000019244497?w=900&h=600); 調(diào)用棧的英文名叫做Cal...

AaronYuan 2019-08-26 13:52 評論0 收藏0
[翻譯] JS的遞歸與TCO尾調(diào)用優(yōu)化

這兩天搜了下JS遞歸的相關文章，覺得這篇文章很不錯，就順手翻譯了下，也算給自己做個筆記，題目是我自己加的。原文很長，寫得也很詳盡，這里并非逐字翻譯，而是作者所講的主要概念加上我自己的一些理解，本文中解決方案的實際意義并不是特別大，但算法的邏輯挺有意思，不過也略抽象，理解需要花點時間（囧，估計我太閑了）文中的用例?全部來自原文：原文鏈接：（原題為：理解JS函數(shù)式編程中的遞歸）Underst...

pekonchan 2019-08-21 10:49 評論0 收藏0
js 實現(xiàn)斐波那契數(shù)列(數(shù)組緩存、動態(tài)規(guī)劃、尾調(diào)用優(yōu)化)

摘要：根據(jù)該規(guī)則，返回第個斐波那契數(shù)。尾遞歸函數(shù)調(diào)用自身，稱為遞歸。一個前端眼中的斐波那契數(shù)列解斐波那契數(shù)列的實用解法調(diào)用棧尾遞歸和手動優(yōu)化尾調(diào)用優(yōu)化譯我從用寫斐波那契生成器中學到的令人驚訝的件事斐波那契數(shù)列是以下一系列數(shù)字： 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ... 在種子數(shù)字 0 和 1 ...

趙連江 2019-08-23 11:38 評論0 收藏0
ES6函數(shù)與Lambda演算

摘要：高階函數(shù)函數(shù)式編程中，接受函數(shù)作為參數(shù)，或者返回一個函數(shù)作為結果的函數(shù)通常就被稱為高階函數(shù)。均屬于高階函數(shù)，高階函數(shù)并不神秘，我們?nèi)粘＞幊桃矔玫?。參考演算函?shù)式編程指南入門康托爾哥德爾圖靈永恒的金色對角線原文函數(shù)與演算緣起造了一個輪子，根據(jù)GitHub項目地址，生成項目目錄樹，直觀的展現(xiàn)項目結構，以便于介紹項目。歡迎Star。 repository-tree 技術棧： ES6 ...

fasss 2019-08-21 18:45 評論0 收藏0
ES6學習第七章函數(shù)的擴展

摘要：前言本章介紹函數(shù)的擴展。形式為變量名，函數(shù)的最后一個命名參數(shù)以為前綴。規(guī)定只要函數(shù)參數(shù)使用了默認值解構賦值或者擴展運算符，那么函數(shù)內(nèi)部就不能顯式設定為嚴格模式，否則會報錯。箭頭函數(shù)不能用作構造函數(shù)。尾遞歸函數(shù)調(diào)用自身，稱為遞歸。前言本章介紹函數(shù)的擴展。有些不常用的知識了解即可。本章原文鏈接：函數(shù)的擴展。函數(shù)參...

番茄西紅柿 2021-11-29 10:50 評論0 收藏2637