数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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() 调用。
结论
我们学习了三种查找调用函数名称的方法。第一种方法最简单，并且所有现代浏览器都支持。第二种方法是最流行的方法，因为它打印整个堆栈跟踪，并且使用堆栈跟踪，用户还可以跟踪错误并轻松克服它们。最后一种方法是最古老的。即使某些浏览器不支持第三种方法，也建议使用第一种或第二种方法。
7K+ 浏览量
