ES12 中的调用栈详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，调用栈是一个非常重要的概念。它表示函数调用的堆栈，即函数调用树的执行顺序。在 ES12 中，调用栈的实现有了一些新的特性，本文将详细介绍 ES12 中的调用栈。

调用栈的基本概念

在 JavaScript 中，函数调用时会创建一个新的执行上下文，并将其压入调用栈中。当函数执行完成后，执行上下文会从调用栈中弹出。调用栈是一个后进先出（LIFO）的数据结构，即最后压入的执行上下文会最先弹出。

调用栈是一个非常重要的概念，因为它可以帮助我们理解代码的执行顺序，以及函数调用时的上下文关系。在 ES12 中，调用栈的实现有了一些新的特性，让我们来一一了解。

ES12 中的新特性

`Error.prepareStackTrace`

在 ES12 中，Error 对象新增了一个静态方法 prepareStackTrace。这个方法可以自定义堆栈跟踪信息的格式。

我们可以使用这个方法来定制我们自己的调用栈格式，例如：

// javascriptcn.com 代码示例
Error.prepareStackTrace = function (error, stack) {
  return stack.map((callSite) => {
    return {
      functionName: callSite.getFunctionName(),
      fileName: callSite.getFileName(),
      lineNumber: callSite.getLineNumber(),
      columnNumber: callSite.getColumnNumber(),
    };
  });
};

function foo() {
  console.log(new Error().stack);
}

foo();

上面的代码中，我们将 prepareStackTrace 方法重写为一个函数，它会返回一个新的堆栈跟踪信息数组。在 foo 函数中，我们输出了一个 Error 对象的堆栈跟踪信息。这里我们使用了 new Error().stack 来获取当前的堆栈跟踪信息，然后将其转换成我们自己的格式。

输出结果如下：

// javascriptcn.com 代码示例
[
  {
    "functionName": "foo",
    "fileName": "/path/to/file.js",
    "lineNumber": 9,
    "columnNumber": 3
  },
  {
    "functionName": null,
    "fileName": "/path/to/file.js",
    "lineNumber": 14,
    "columnNumber": 1
  }
]

我们可以看到，输出的结果中只包含了调用栈中的函数名称、文件名、行号和列号信息，这是我们自定义的格式。

`Error.stackTraceLimit`

在 ES12 中，Error 对象新增了一个实例属性 stackTraceLimit。这个属性可以用来控制堆栈跟踪信息的最大数量。

我们可以通过设置 Error.stackTraceLimit 来限制输出的堆栈跟踪信息数量，例如：

Error.stackTraceLimit = 1;

function foo() {
  console.log(new Error().stack);
}

foo();

上面的代码中，我们将 Error.stackTraceLimit 设置为 1，这意味着我们只会输出最近的一次函数调用的堆栈跟踪信息。

输出结果如下：

Error
    at foo (/path/to/file.js:5:13)

我们可以看到，输出的结果只包含了最近一次函数调用的堆栈跟踪信息。

总结

ES12 中的调用栈新增了一些新的特性，例如 Error.prepareStackTrace 和 Error.stackTraceLimit，它们可以帮助我们更好地理解代码的执行顺序，并且定制我们自己的堆栈跟踪信息格式。

在实际开发中，我们可以利用这些特性来调试代码，快速定位问题，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6567337ad2f5e1655d01505e