JS 函数执行时机的探索

在 Web 开发的浩瀚世界中，JavaScript (JS) 函数扮演着至关重要的角色，赋予我们的应用程序灵活性、交互性和动态性。然而，对于 JS 函数的执行时机，却常常存在一些微妙之处，理解这些微妙之处对于编写高效、健壮的代码至关重要。

执行的艺术

让我们从一个经典的例子开始：

var a = 1;
function fn() {
  console.log(a);
}
a = 2;
fn();

在这个例子中，我们声明了一个变量 a，并将其初始化为 1。然后，我们定义了一个函数 fn()，它将打印变量 a 的值。接下来，我们将 a 重新赋值为 2。最后，我们调用函数 fn()。

问题是，当 fn() 被调用时，a 的值是多少？是 1 还是 2？

答案是：1 。

这是因为 JavaScript 遵循词法作用域 。这意味着函数的变量作用域是由它被声明时的代码位置决定的，而不是它被调用时的代码位置。因此，当 fn() 被调用时，它仍然可以访问在它被声明时 a 的值，也就是 1。

延迟的执行：setTimeout 的奥秘

另一个需要注意的执行时机相关概念是 setTimeout 函数。setTimeout 用于在指定的时间段后调用一个函数或执行一个表达式。其语法如下：

setTimeout(function, milliseconds);

例如，以下代码将在 2 秒后打印 "Hello, world!":

setTimeout(function() {
  console.log("Hello, world!");
}, 2000);

然而，setTimeout 的执行时机并不总是那么直接。考虑以下代码：

var a = 1;
setTimeout(function() {
  console.log(a);
}, 0);
a = 2;

在这个例子中，我们声明了一个变量 a，并将其初始化为 1。然后，我们使用 setTimeout 设置了一个 0 毫秒的延迟，以调用一个函数来打印 a 的值。接下来，我们将 a 重新赋值为 2。最后，代码继续执行。

那么，当 setTimeout 的回调函数被调用时，a 的值是多少？是 1 还是 2？

答案是：2 。

这是因为 setTimeout 是一个异步函数，这意味着它不会阻塞代码执行。因此，在 setTimeout 的回调函数被调用之前，a 的值已经重新赋值为 2。

结论

理解 JS 函数的执行时机对于编写高效、健壮的代码至关重要。通过掌握词法作用域和异步函数的细微差别，我们可以充分利用 JavaScript 的强大功能，构建出响应迅速、用户体验卓越的 Web 应用程序。