函数调用栈、函数提升、箭头函数：迷失在 JavaScript 运行时中

序言

在 JavaScript 的迷人世界中，函数扮演着至关重要的角色。理解函数是如何调用的、何时创建的以及它们如何与作用域交互，对于充分利用这门动态语言至关重要。本文将深入探究 JavaScript 中函数调用栈、函数提升和箭头函数的奥秘，以帮助您掌握其错综复杂的运行时行为。

函数调用栈

函数调用栈是一个数据结构，用于跟踪 JavaScript 程序中正在执行的函数。当一个函数被调用时，它会被压入调用栈中。当函数执行完毕，它会被从调用栈中弹出。调用栈有助于管理函数调用顺序和执行上下文。

函数提升

在 JavaScript 中，函数声明会在执行脚本之前提升到其作用域的顶部。这意味着函数可以在声明之前被调用。提升不会影响变量声明，它们只会在声明时提升。函数提升允许我们以任何顺序组织代码，而不用担心引用错误。

箭头函数

箭头函数（=>）是 ES6 中引入的一种新型函数语法。它们与传统函数有很多不同，包括：

• 词法作用域： 箭头函数没有自己的 this 或 arguments 对象。它们从封闭作用域继承这些值。
• 返回： 箭头函数中省略大括号时，将隐式返回表达式。
• 简洁性： 箭头函数语法简洁，这使得在需要时创建小型、一次性函数变得容易。

实战示例

函数调用栈

function foo() {
  console.log("Foo");
  bar();
}

function bar() {
  console.log("Bar");
}

foo();

执行以上代码时，调用栈将按如下所示管理：

| **调用栈**  |
|---|---|
| | foo |
| <- | bar |

函数提升

bar(); // "Bar"

function bar() {
  console.log("Bar");
}

即使 bar() 函数在声明之前被调用，JavaScript 也会将其提升到顶部，因此调用是有效的。

箭头函数

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

该箭头函数隐式返回 a + b 的表达式。它还从封闭作用域继承 this 和 arguments。

结论

函数调用栈、函数提升和箭头函数是理解 JavaScript 运行时行为的关键概念。掌握这些概念将使您能够编写更健壮、更可维护的代码。通过理解函数在 JavaScript 中的运作方式，您可以充分利用这门语言的强大功能并创建引人注目的应用程序。