如何在 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.callee.caller.name
示例
在下面的示例中，我们使用了参数属性来查找函数调用者名称。在这里，我们创建了两个函数名称 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() 调用。
结论
我们已经了解了查找调用者函数名称的三种方法。第一种方法最简单，并且所有现代浏览器都支持。第二种方法是最流行的，因为它会打印整个堆栈跟踪，使用堆栈跟踪，用户还可以跟踪错误并轻松克服它们。最后一种方法是最古老的。即使某些浏览器不支持第三种方法，也建议使用第一种方法或第二种方法。
