console.trace()方法在同步和異步關閉函式呼叫中給出不同的輸出-有解無憂

第一個代碼片段：

console.log("First")

function main() { 
    var n = 10;
    
    function nested(argument) {

        console.log(n);
        console.trace();
    }

    setTimeout(nested, 0);

    console.trace();
    console.log("Last command inside nested function");   
}

main();

console.trace();

console.log("Last");

第一個代碼片段的輸出

在這里，在記錄nested后被異步呼叫Last。

該console.trace()命令顯示所有函式都在執行堆疊中，包括main在其中nested宣告的函式。

我猜這是因為即使的執行背景關系main已經從執行堆疊中彈出，nested仍然可以訪問它的詞法環境，這就是它顯示所有函式的原因。

第二個代碼片段：

console.log("First")

function main() { 
    var n = 10;
    
    function nested(argument) {

        console.log(n);
        console.trace();
    }
    console.trace();

    console.log("Last command inside main function");   
    return nested;

}

var hello = main();

hello();

console.log("Last");

第二個代碼片段的輸出

在此，nested在從函式回傳后被同步呼叫main。在這種情況下，只有nested和全域匿名函式顯示在執行堆疊中。

這是為什么？第二個不應該也顯示所有函式都在執行堆疊中嗎？

uj5u.com熱心網友回復：

第二個不應該也顯示所有函式都在執行堆疊中嗎？

沒有。在第一個示例中，如跟蹤所示，toplevel 呼叫了main，它呼叫setTimeout了，這導致了nested.

在第二個示例中，toplevel 呼叫了main，然后 toplevel 呼叫了hello。hello在內部構造的事實main（并且它關閉了它的一些變數）與執行堆疊無關。

原因與同步或異步無關：

function a(val) {
  function b() {
    console.trace(val);
  }
  b();
}

const c = a(42);  // toplevel calls a, a calls b

function a(val) {
  return function b() {
    console.trace(val);
  }
}

const c = a(42);  // toplevel calls a
c();              // toplevel calls b (a.k.a. c)

在這兩種情況下，都b關閉了val，并且在這兩種情況下都沒有異步性，但結果與您的示例相似。這是因為堆疊不關心你的值是在哪里定義的。a就執行堆疊而言，回傳 functionb或 number無關緊要42。b記住的事實val同樣無關緊要。

執行堆疊唯一關心的是，當函式b執行時，是哪個函式的執行導致了它。在您的第二個示例中，hello結果是由創建的main，但它的執行是由頂層引起的，而不是main。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/508192.html

標籤：javascript 异步堆栈跟踪

上一篇：使用反應增加電子商務中的專案功能

下一篇：如何更改按鈕的邊框顏色？