如何在 JavaScript 中找出呼叫函式?


在本教程中,我們將學習如何在 JavaScript 中找出呼叫函式。函式是可重用的程式碼,使用者可以從任何地方呼叫它。但有時,他們需要知道哪個函式是呼叫者才能執行某些操作。

例如,假設我們可以從另外 2 到 3 個函式呼叫任何單個函式,並且我們需要根據呼叫函式執行某些操作。使用者可以透過下面的程式碼示例理解這種情況。

function func3 () {
   If ( caller is func2() ) {
      // code for some operation
   } else if ( caller is func1() ){
      // code for some different operation
   }
}
function func2 () {
   func3();
}
function func1 () {
   func3();
}

透過上面的例子,使用者可以理解需要知道呼叫函式的原因。

這裡,我們有不同的方法來獲取函式名稱。

使用 function.caller 屬性

在這種方法中,我們將使用 JavaScript 中的 *function.caller* 屬性。

它返回呼叫當前函式的函式的名稱。

如果函式是從頂級 JavaScript 程式碼呼叫的,則返回 null 值。

此外,使用者不能將此方法與嚴格函式和非同步函式一起使用,因為它始終為此類函式返回 null 值。

語法

使用者可以按照以下語法為任何函式使用 caller 屬性。

function_name.caller.name;

引數

  • Caller 屬性不包含任何引數。

  • **function_name** − 這是使用者想要查詢呼叫函式的函式的名稱。

示例

在下面的示例中,我們建立了 3 個函式,並從另一個函式呼叫了一個函式。當我們呼叫函式時,我們使用 function.caller.name 屬性在螢幕上呈現呼叫函式。

<!DOCTYPE html>
<html>
<body>
   <h3> Finding the function caller name in JavaScript. </h3>
   <h4> Caller name for func3():</h4>
   <div id="caller1"> </div>
   <h4> Caller name for func2(): </h4>
   <div id="caller2"> </div>
   <script>
      let caller1 = document.getElementById("caller1");
      let caller2 = document.getElementById("caller2");
      function func3() {
         caller1.innerHTML += func3.caller.name + " <br/>";
      }
      function func2() {
         caller2.innerHTML += func2.caller.name + " <br/>";
         func3();
      }
      function func1() {
         func3();
         func2();
      }
      func1();
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到它列印了當前正在執行的函式的呼叫函式的名稱。

使用函式的 Arguments 屬性

在 JavaScript 中,每個函式都包含 arguments 物件。每個函式都有自己的 arguments 物件,其中包含函式的屬性,例如函式的呼叫者名稱和函式引數的值。

語法

請按照以下語法使用相應函式的 arguments 物件獲取函式呼叫者名稱。

arguments.callee.caller.name

示例

在下面的示例中,我們使用了 arguments 屬性來查詢函式呼叫者名稱。在這裡,我們建立了兩個函式名稱 *child()* 和 *parent()* 函式。此外,我們還從 *parent()* 函式呼叫了 *child()* 函式。

<html>
<head>
   <title> find out the funciton caller name in JavaScript. </title>
</head>
<body>
   <h2> Finding the function caller name in JavaScript. </h2>
   <h4> Finding the caller name of child() function using arguments property. </h4>
   <div id="caller1"></div>
   <script>
      let caller1 = document.getElementById("caller1");
      function child() {
         caller1.innerHTML += arguments.callee.caller.name + ". <br/>";
      }
      function parent() {
         child();
      }
      parent();
   </script>
</body>
</html>

在控制檯中記錄堆疊跟蹤

使用堆疊跟蹤查詢函式呼叫者名稱是在 JavaScript 中獲取函式名稱最流行的方法。正如堆疊跟蹤名稱所代表的那樣,它是在我們執行程式時活動幀的堆疊。它跟蹤程式的記憶體分配。呼叫新函式時,它會進入堆疊跟蹤,因為我們的程式會為該函式分配新的記憶體。

因此,堆疊跟蹤包含錯誤、操作、函式呼叫等的全部詳細資訊。

語法

使用者可以按照以下語法獲取堆疊跟蹤。

console.trace();

示例

在這個例子中,我們將在函式中使用上述方法列印堆疊跟蹤以檢查函式的呼叫者名稱。我們可以在控制檯中看到輸出,使用者可以透過按鍵盤上的 *ctrl + shift + I* 鍵開啟控制檯。

function func3() {
   console.trace();
}
function func2() {
   func3();
}
function func1() {
   func3();
   func2();
}
func1();

要執行上述程式碼,您應該在本地計算機上安裝 Node JS。使用者可以使用以下命令執行上述程式碼。

命令

node filename.js

輸出

我們使用終端中的 Node Js 運行了上述程式碼。使用者可以看到上面的輸出。它清楚地顯示,在第一個跟蹤中,func3() 只從 func1() 呼叫,在第二個跟蹤中,它顯示 func2() 從 func1() 呼叫,而 func3() 從 func2() 呼叫。

結論

我們學習了三種查詢呼叫函式名稱的方法。第一種方法最簡單,並且所有現代瀏覽器都支援。第二種方法是最流行的一種,因為它列印整個堆疊跟蹤,並且使用堆疊跟蹤,使用者還可以跟蹤錯誤並輕鬆克服它們。最後一種方法是最古老的。即使某些瀏覽器不支援第三種方法,也建議使用第一種或第二種方法。

更新於:2022年7月25日

7K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.