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

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

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

調(diào)用棧的英文名叫做Call Stack，大家或多或少是有聽過(guò)的，但是對(duì)于js調(diào)用棧的工作方式以及如何在工作中利用這一特性，大部分人可能沒有進(jìn)行過(guò)更深入的研究，這塊內(nèi)容可以說(shuō)對(duì)我們前端來(lái)說(shuō)就是所謂的基礎(chǔ)知識(shí)，咋一看好像用處并沒有很大，但掌握好這個(gè)知識(shí)點(diǎn)，就可以讓我們?cè)谝院罂梢宰叩母h(yuǎn)，走的更快！

博客、前端積累文檔、公眾號(hào)、GitHub

數(shù)據(jù)結(jié)構(gòu)：棧

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

調(diào)用棧的運(yùn)行機(jī)制

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

調(diào)用棧debug大法

數(shù)據(jù)結(jié)構(gòu)：棧

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

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

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

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

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

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

調(diào)用棧的運(yùn)行機(jī)制

機(jī)制：

程序運(yùn)行到一個(gè)函數(shù)，它就會(huì)將其添加到調(diào)用棧中，當(dāng)從這個(gè)函數(shù)返回的時(shí)候，就會(huì)將這個(gè)函數(shù)從調(diào)用棧中刪掉。

看一下例子幫助理解：

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

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

調(diào)用偵：

每個(gè)進(jìn)入到調(diào)用棧中的函數(shù)，都會(huì)分配到一個(gè)多帶帶的?？臻g，稱為“調(diào)用偵”。

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

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

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

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

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

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

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

何謂尾調(diào)用：

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

function f(x){
  return g(x); // 最后一步調(diào)用另一個(gè)函數(shù)并且使用return
}
function f(x){
  g(x); // 沒有return 不算尾調(diào)用 因?yàn)椴恢篮竺孢€有沒有操作
  // return undefined; // 隱式的return
}

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

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

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

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

防止爆棧：

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

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

注意：

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

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

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

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

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

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

調(diào)用棧debug大法

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

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

快速定位問(wèn)題/修改三方庫(kù)的代碼。

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

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

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

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

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

如圖所示,點(diǎn)擊右側(cè)還能查看代碼位置：

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

積跬步以至千里

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

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

結(jié)語(yǔ)

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

理解調(diào)用棧的運(yùn)行機(jī)制，對(duì)代碼背后的一些執(zhí)行機(jī)制也可以更加了解，幫助我們?cè)诎俪吒皖^更進(jìn)一步。

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

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

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

如果這篇文章幫助到了你，歡迎點(diǎn)贊和關(guān)注，你的支持是對(duì)我最大的鼓勵(lì)！

博客、前端積累文檔、公眾號(hào)、GitHub

以上2019/5/19

參考資料：

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

ES6入門-阮一峰

JavaScript 如何工作：對(duì)引擎、運(yùn)行時(shí)、調(diào)用堆棧的概述

淺析javascript調(diào)用棧

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/6885.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jemygraw

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow網(wǎng)絡(luò)可視化

閱讀 1191·2023-04-26 02:38
TypeScript入門學(xué)習(xí)之路

閱讀 1487·2021-11-22 09:34
BigBoxHost：便宜美國(guó)服務(wù)器，雙Xeon L5420/16GB/2TB硬盤/1Gbps端口月

閱讀 1197·2021-09-26 10:19
純css，div隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。[轉(zhuǎn)載]

閱讀 3184·2019-08-29 17:15
JQuery干貨篇之插入元素

閱讀 3534·2019-08-29 12:27
重學(xué)前端學(xué)習(xí)筆記（二十一）--如何選中svg里的a元素？

閱讀 1725·2019-08-26 13:51
JS核心知識(shí)點(diǎn)梳理——正則篇（下）

閱讀 1870·2019-08-26 13:47
前端開發(fā)學(xué)習(xí)筆記 - 1. Node.JS安裝筆記

閱讀 1023·2019-08-26 12:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

調(diào)用棧的運(yùn)行機(jī)制

相關(guān)文章