詳解JS函數(shù)stack size計算方法
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。
如果你寫了一個一直調(diào)用自身的死循環(huán)，那么恭喜你，很快就可以看到報錯：Uncaught RangeError: Maximum call stack size exceeded。那么這個call stack size有多少呢？
1. 計算方法
如下的方法可以為你計算出你使用的JavaScript引擎可以支持多深的調(diào)用(由Ben Alman的一段代碼獲得靈感)：
function computeMaxCallStackSize() {
try {
return 1 + computeMaxCallStackSize();
} catch (e) {
// Call stack overflow
return 1;
}
}
運(yùn)行得到如下三個結(jié)果：
- Node.js: 11034
- Firefox: 50994
- Chrome: 10402
這些數(shù)字代表了什么呢？Mr.Aleph告訴我在V8，可調(diào)用的層數(shù)基于兩個方面：1. 棧的大小；2. 每一棧幀的大小(用于記錄函數(shù)參數(shù)和局部變量)。你可以在computeMaxCallStackSize聲明局部變量來測試，你會發(fā)現(xiàn)數(shù)字變小。
2. ECMAScript 6中尾遞歸優(yōu)化
ECMAScript 6支持尾遞歸優(yōu)化：如果一個函數(shù)的最后一個操作是函數(shù)調(diào)用，那么將會用“跳轉(zhuǎn)”而不是“子調(diào)用”。也就是說如果你將computeMaxCallStackSize重寫成如下形式，在ES6的嚴(yán)格模式下，就會一直運(yùn)行了。
function computeMaxCallStackSize(size) {
size = size || 1;
return computeMaxCallStackSize(size + 1);
}
3. 亮點(diǎn)評論
- Andrei: “ECMAScript 6”版本的代碼根本跑不通。雖然size會被更改，但是最終并沒有值返回。
- 回復(fù)Andrei: 有趣！你不能用這段代碼去計算stack size。在ES6下，這段代碼會一直運(yùn)行，因此不會返回數(shù)據(jù)。在其它情況下，會返回RangeError。為了使其工作，我把代碼重寫了一下：
var computeMaxCallStackSize = (function() {
return function() {
var size = 0;
function cs() {
try {
size++;
return cs();
} catch(e) {
return size + 1;
}
}
return cs();
};
}());
相關(guān)文章
最近發(fā)現(xiàn)在對JS的學(xué)習(xí)中有很多朋友對this的指向問題還是有很大的誤區(qū)或者說只是大致了解,但是一旦遇到復(fù)雜的情況就會因?yàn)閠his指向問題而引發(fā)各種bug。所以這篇文章主要給大家介紹了關(guān)于js中this的指向問題的相關(guān)資料，需要的朋友可以參考下2018-11-11
用JS動態(tài)設(shè)置CSS樣式常見方法小結(jié)(推薦)
本文給大家總結(jié)了js動態(tài)設(shè)置css樣式的常見方法，非常實(shí)用，對js設(shè)置css樣式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
在javascript將NodeList作為Array數(shù)組處理的方法
在Web前端編程中，我們通常會通過document.getElementsByTagName的方法取出一組相同標(biāo)簽的dom元素。2010-07-07
微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序的相關(guān)注冊、配置及基本使用方法,并配以圖片加以說明,需要的朋友可以參考下2019-03-03
Javascript結(jié)合css實(shí)現(xiàn)網(wǎng)頁換膚功能
現(xiàn)在網(wǎng)站換皮膚是比較常見的功能，大多數(shù)論壇都有的，要想實(shí)現(xiàn)這樣效果可以看如下代碼.2009-11-11
以前我們說的內(nèi)存泄漏，通常發(fā)生在后端，但是不代表前端就不會有內(nèi)存泄漏。特別是當(dāng)前端項(xiàng)目變得越來越復(fù)雜后，前端也逐漸稱為內(nèi)存泄漏的高發(fā)區(qū)。本文就帶大家了解一下Javascript的內(nèi)存泄漏2022-06-06
js中confirm實(shí)現(xiàn)執(zhí)行操作前彈出確認(rèn)框的方法
這篇文章主要介紹了js中confirm實(shí)現(xiàn)執(zhí)行操作前彈出確認(rèn)框的方法,是執(zhí)行刪除等操作時常用的功能,非常具有實(shí)用價值,需要的朋友可以參考下2014-11-11
最近回頭看看自己以前寫的游戲代碼，總結(jié)出幾個可以優(yōu)化改進(jìn)的地方，當(dāng)然還有很多地方需要優(yōu)化，還希望大家指出來。2010-11-11
這篇文章主要為大家分享了Bootstrap簡單表單顯示學(xué)習(xí)筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟
本文主要介紹了typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01