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

AaronYuan 發(fā)布于2019-08-26 13:52 / 3061人閱讀

摘要：調(diào)用棧的運行機制機制程序運行到一個函數(shù)，它就會將其添加到調(diào)用棧中，當(dāng)從這個函數(shù)返回的時候，就會將這個函數(shù)從調(diào)用棧中刪掉。在調(diào)用棧中每個調(diào)用偵都對應(yīng)一個函數(shù)，最上方的調(diào)用幀稱為當(dāng)前幀，調(diào)用棧是由所有的調(diào)用偵形成的。

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

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

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

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

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

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

調(diào)用棧debug大法

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

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

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

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

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

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

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

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

機制：

程序運行到一個函數(shù)，它就會將其添加到調(diào)用棧中，當(dāng)從這個函數(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ù)，都會分配到一個多帶帶的?？臻g，稱為“調(diào)用偵”。

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

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

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

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

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

當(dāng)函數(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)化只在嚴(yán)格模式下開啟，非嚴(yán)格模式是無效的。

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

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

調(diào)用棧debug大法

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

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

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

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

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

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

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

以上2019/5/19

參考資料：

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

ES6入門-阮一峰

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

淺析javascript調(diào)用棧

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109698.html

發(fā)表評論

登陸后可評論

0條評論

AaronYuan

男|高級講師

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

TA的文章

10分鐘了解Jmeter性能測試工具，懂事的已經(jīng)點進來看了

閱讀 1419·2021-11-15 11:45
C語言實現(xiàn)通訊錄

閱讀 3186·2021-09-27 13:36
前端每日實戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動畫

閱讀 2920·2019-08-30 15:54
轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

閱讀 1040·2019-08-29 12:38
剖析簡易計算器帶你入門微信小程序開發(fā)

閱讀 2973·2019-08-29 11:22
js 調(diào)用棧機制與ES6尾調(diào)用優(yōu)化介紹

閱讀 3062·2019-08-26 13:52
vue權(quán)限問題

閱讀 2096·2019-08-26 13:30
Vue+Typescript中在Vue上掛載axios使用時報錯

閱讀 652·2019-08-26 10:37

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章