這篇文章給大家分享的是有關JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于向陽企業(yè)網(wǎng)站建設,響應式網(wǎng)站建設,成都做商城網(wǎng)站。向陽網(wǎng)站建設公司,為向陽等地區(qū)提供建站服務。全流程按需定制設計，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

調(diào)用棧（Call Stack）

調(diào)用棧（Call Stack）是一個基本的計算機概念，這里引入一個概念：棧幀。

棧幀是指為一個函數(shù)調(diào)用單獨分配的那部分棧空間。

當運行的程序從當前函數(shù)調(diào)用另外一個函數(shù)時，就會為下一個函數(shù)建立一個新的棧幀，并且進入這個棧幀，這個棧幀稱為當前幀。而原來的函數(shù)也有一個對應的棧幀，被稱為調(diào)用幀。每一個棧幀里面都會存入當前函數(shù)的局部變量。

當函數(shù)被調(diào)用時，就會被加入到調(diào)用棧頂部，執(zhí)行結(jié)束之后，就會從調(diào)用棧頂部移除該函數(shù)。并將程序運行權(quán)利（幀指針）交給此時棧頂?shù)臈＿@種后進后出的結(jié)構(gòu)也就是函數(shù)的調(diào)用棧。

而在JavaScript里，可以很方便的通過console.trace()這個方法查看當前函數(shù)的調(diào)用幀

尾調(diào)用

說尾遞歸之前必須先了解一下什么是尾調(diào)用。簡單的說，就是一個函數(shù)執(zhí)行的最后一步是將另外一個函數(shù)調(diào)用并返回。

以下是正確示范：

// 尾調(diào)用正確示范1.0
function f(x){
 return g(x);
}

// 尾調(diào)用正確示范2.0
function f(x) {
 if (x > 0) {
  return m(x)
 }
 return n(x);
}

1.0程序的最后一步即是執(zhí)行函數(shù)g，同時將其返回值返回。2.0中，尾調(diào)用并不是非得寫在最后一行中，只要執(zhí)行時，是最后一步操作就可以了。

以下是錯誤示范：

// 尾調(diào)用錯誤示范1.0
function f(x){
 let y = g(x);
 return y;
}

// 尾調(diào)用錯誤示范2.0
function f(x){
 return g(x) + 1;
}
// 尾調(diào)用錯誤示范3.0
function f(x) {
 g(x); // 這一步相當于g(x) return undefined
}

1.0最后一步為賦值操作，2.0最后一步為加法運算操作，3.0隱式的有一句return undefined

尾調(diào)用優(yōu)化

在調(diào)用棧的部分我們知道，當一個函數(shù)A調(diào)用另外一個函數(shù)B時，就會形成棧幀，在調(diào)用棧內(nèi)同時存在調(diào)用幀A和當前幀B，這是因為當函數(shù)B執(zhí)行完成后，還需要將執(zhí)行權(quán)返回A，那么函數(shù)A內(nèi)部的變量，調(diào)用函數(shù)B的位置等信息都必須保存在調(diào)用幀A中。不然，當函數(shù)B執(zhí)行完繼續(xù)執(zhí)行函數(shù)A時，就會亂套。

那么現(xiàn)在，我們將函數(shù)B放到了函數(shù)A的最后一步調(diào)用（即尾調(diào)用），那還有必要保留函數(shù)A的棧幀么？當然不用，因為之后并不會再用到其調(diào)用位置、內(nèi)部變量。因此直接用函數(shù)B的棧幀取代A的棧幀即可。當然，如果內(nèi)層函數(shù)使用了外層函數(shù)的變量，那么就仍然需要保留函數(shù)A的棧幀，典型例子即是閉包。

在網(wǎng)上有很多關于講解尾調(diào)用的博客文章，其中流傳廣泛的一篇中有這樣一段。我不是很認同。

function f() {
 let m = 1;
 let n = 2;
 return g(m + n);
}
f();
// 等同于
function f() {
 return g(3);
}
f();
// 等同于
g(3);

以下為博客原文：上面代碼中，如果函數(shù)g不是尾調(diào)用，函數(shù)f就需要保存內(nèi)部變量m和n的值、g的調(diào)用位置等信息。但由于調(diào)用g之后，函數(shù)f就結(jié)束了，所以執(zhí)行到最后一步，完全可以刪除 f() 的調(diào)用記錄，只保留 g(3) 的調(diào)用記錄。

但我認為第一種中，也是先執(zhí)行m+n這步操作，再調(diào)用函數(shù)g同時返回。這應當是一次尾調(diào)用。同時m+n的值也通過參數(shù)傳入函數(shù)g內(nèi)部，并沒有直接引用，因此也不能說需要保存f內(nèi)部的變量的值。

總得來說，如果所有函數(shù)的調(diào)用都是尾調(diào)用，那么調(diào)用棧的長度就會小很多，這樣需要占用的內(nèi)存也會大大減少。這就是尾調(diào)用優(yōu)化的含義。

尾遞歸

遞歸，是指在函數(shù)的定義中使用函數(shù)自身的一種方法。函數(shù)調(diào)用自身即稱為遞歸，那么函數(shù)在尾調(diào)用自身，即稱為尾遞歸。

最常見的遞歸，斐波拉契數(shù)列，普通遞歸的寫法：

function f(n) {
 if (n === 0 || n === 1) return n 
 else return f(n - 1) + f(n - 2)
}

這種寫法，簡單粗暴，但是有個很嚴重的問題。調(diào)用棧隨著n的增加而線性增加，當n為一個大數(shù)（我測了一下，當n為100的時候，瀏覽器窗口就會卡死。。）時，就會爆棧了（棧溢出，stack overflow）。這是因為這種遞歸操作中，同時保存了大量的棧幀，調(diào)用棧非常長，消耗了巨大的內(nèi)存。

接下來，將普通遞歸升級為尾遞歸看看。

function fTail(n, a = 0, b = 1) { 
 if (n === 0) return a
 return fTail(n - 1, b, a + b)
}

很明顯，其調(diào)用棧為

復制代碼 代碼如下:

fTail(5) => fTail(4, 1, 1) => fTail(3, 1, 2) => fTail(2, 2, 3) => fTail(1, 3, 5) => fTail(0, 5, 8) => return 5

被尾遞歸改寫之后的調(diào)用棧永遠都是更新當前的棧幀而已，這樣就完全避免了爆棧的危險。

但是，想法是好的，從尾調(diào)用優(yōu)化到尾遞歸優(yōu)化的出發(fā)點也沒錯，然并卵：），讓我們看看V8引擎官方團隊的解釋

Proper tail calls have been implemented but not yet shipped given that a change to the feature is currently under discussion at TC39.

意思就是人家已經(jīng)做好了，但是就是還不能不給你用：）嗨呀，好氣喔。

當然，人家肯定是有他的正當理由的：

1. 在引擎層面消除尾遞歸是一個隱式的行為，程序員寫代碼時可能意識不到自己寫了死循環(huán)的尾遞歸，而出現(xiàn)死循環(huán)后又不會報出stack overflow的錯誤，難以辨別。

2. 堆棧信息會在優(yōu)化的過程中丟失，開發(fā)者調(diào)試非常困難。

道理我都懂，但是不信邪的我拿nodeJs（v6.9.5）手動測試了一下：

好的，我服了

手動優(yōu)化

雖然我們暫時用不上ES6的尾遞歸高端優(yōu)化，但遞歸優(yōu)化的本質(zhì)還是為了減少調(diào)用棧，避免內(nèi)存占用過多，爆棧的危險。而俗話說的好，一切能用遞歸寫的函數(shù)，都能用循環(huán)寫——尼克拉斯·夏，如果將遞歸改成循環(huán)的話，不就解決了這種調(diào)用棧的問題么。

方案一：直接改函數(shù)內(nèi)部，循環(huán)執(zhí)行

function fLoop(n, a = 0, b = 1) { 
 while (n--) {
  [a, b] = [b, a + b]
 }
 return a
}

這種方案簡單粗暴，缺點就是沒有遞歸的那種寫法比較容易理解。

方案二：Trampolining（蹦床函數(shù)）

function trampoline(f) { 
 while (f && f instanceof Function) {
  f = f()
 }
 return f
}

function f(n, a = 0, b = 1) { 
 if (n > 0) {
  [a, b] = [b, a + b]
  return f.bind(null, n - 1, a, b)
 } else {
  return a
 }
}

trampoline(f(5)) // return 5

這種寫法算是容易理解一些了，就是蹦床函數(shù)的作用需要仔細看看。缺點還有就是需要修改原函數(shù)內(nèi)部的寫法。

方案三：尾遞歸函數(shù)轉(zhuǎn)循環(huán)方法

function tailCallOptimize(f) { 
 let value
 let active = false
 const accumulated = []
 return function accumulator() {
  accumulated.push(arguments)
  if (!active) {
   active = true
   while (accumulated.length) {
    value = f.apply(this, accumulated.shift())
   }
   active = false
   return value
  }
 }
}

const f = tailCallOptimize(function(n, a = 0, b = 1) { 
 if (n === 0) return a
 return f(n - 1, b, a + b)
})
f(5) // return 5

經(jīng)過 tailCallOptimize 包裝后返回的是一個新函數(shù) accumulator，執(zhí)行 f時實際執(zhí)行的是這個函數(shù)。這種方法可以不用修改原遞歸函數(shù)，當調(diào)用遞歸時只用使用該方法轉(zhuǎn)置一下便可解決遞歸調(diào)用的問題。

感謝各位的閱讀！關于“JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.chinadenli.net，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站欄目：JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.chinadenli.net/article44/dhephe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、商城網(wǎng)站、營銷型網(wǎng)站建設、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)