详解JavaScript 的执行机制

前言

JavaScript 是一门脚本编程语言，它主要用于 web 前端开发，分为基于浏览器和基于非浏览器（如 Node.js）两种场景。在编写 JavaScript 代码时，开发人员通常会想了解运行时的具体执行机制。本文将详细讲解 JavaScript 的执行机制，包括如何声明变量、如何执行函数以及如何处理异步代码等内容。

运行时环境

在解释 JavaScript 代码时，需要一个运行时环境。浏览器是常见的运行时环境，它有一个 JavaScript 引擎，例如 Google Chrome 中的 V8，用于解析和执行 JavaScript 代码。对于 Node.js 这样的非浏览器环境，在服务器端通过 V8 引擎解析和执行 JavaScript 代码。

词法作用域

JavaScript 采用的是词法作用域，即根据代码在源代码中的位置来决定作用域。这与其他一些语言（如 Python）采用的动态作用域不同，后者是根据代码在运行时的位置来决定作用域。

词法作用域有一个重要的概念——作用域链。在 JavaScript 中，每个函数都拥有一个作用域链。当函数内部访问一个变量时，它会首先从自身的作用域中查找该变量，如果找不到则会从它的外部作用域中查找，一直到全局作用域。这样的查找过程就是作用域链。

变量声明及初始化

在 JavaScript 中，需要使用 var、let 或 const 关键字来声明变量。它们之间的区别是，var 声明的变量是函数作用域的，而 let 和 const 声明的变量是块作用域的。在 ES6 中，引入了 let 和 const 关键字，它们可以用于声明块级作用域变量。

除了使用关键字声明变量外，变量也可以通过函数参数或全局变量来声明。全局变量可以通过 window 对象访问。在函数外部声明的变量也是全局变量。

变量声明后，可以将变量初始化为一个值。如果没有初始化，变量的值为 undefined。以 let 声明变量为例：

let a; // a 是 undefined
let b = 1; // b 是 1

变量声明提升

JavaScript 中存在变量声明提升的特性。这意味着，在一个代码块内声明的变量会被提升到代码块的顶部，但是赋值操作不会提升。例如：

console.log(a); // undefined
var a = 1;

上述代码实际上被解析为以下形式：

var a;
console.log(a);
a = 1;

函数声明及函数表达式

JavaScript 中的函数有两种声明方法：

函数声明：

function add(a, b) {
  return a + b;
}

函数表达式：

const add = function(a, b) {
  return a + b;
}

函数声明会在代码解析阶段被提升到顶部，可以在代码块中的任何地方调用。而函数表达式相当于赋值操作，只有在代码执行到该语句时才会执行。

闭包

闭包是指在一个函数内部定义的函数，它可以访问外部函数的变量。闭包可以用于保存变量的状态，或者实现函数式编程中的柯里化、柯里化组合等功能。

例如：

function makeAdder(n) {
  return function(x) {
    return n + x;
  };
}

const addFive = makeAdder(5);
console.log(addFive(3)); // 8

上述代码中，makeAdder 函数返回一个内部函数，该内部函数访问了 makeAdder 函数的参数 n。这个内部函数就是一个闭包，它可以持有 makeAdder 函数的参数状态。

异步编程

在 JavaScript 中，由于它采用的是单线程模型，如果一个操作需要花费很长时间，那么整个程序就会被阻塞。为了解决这个问题，JavaScript 引入了异步编程机制，包括 Promise、async/await、回调函数等方式。

以 Promise 为例：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise resolved');
  }, 1000);
});

myPromise.then((res) => {
  console.log(res); // 'promise resolved'
});

上述代码中，创建了一个 Promise 对象，该 Promise 在 1 秒后被 resolve，并返回一个字符串。在 then 方法中，则可以获取到 resolve 的结果。

示例

接下来，我们将借助两个示例来展示 JavaScript 的执行机制。

示例一

console.log('outer1');
setTimeout(() => console.log('timeout1'), 0);
console.log('outer2');

上述代码中，首先输出 'outer1' 和 'outer2'。然后通过 setTimeout 函数，延迟 0 秒输出 'timeout1'。虽然 setTimeout 的第二个参数是 0，但是实际上它并不会立即执行，而是等到当前代码全部执行完毕后才会执行。

执行结果如下：

outer1
outer2
timeout1

示例二

function foo() {
  console.log('foo1');
  setTimeout(() => console.log('foo2'), 0);
  bar();
  console.log('foo3');
}

function bar() {
  console.log('bar');
}

foo();

上述代码中，函数 foo 中有一个 setTimeout 函数和一个 bar 函数调用。setTimeout 的第二个参数仍然是 0，在 foo 的代码块内会延迟输出 'foo2'，但是 bar 函数会在输出 'foo3' 之前输出。

执行结果如下：

foo1
bar
foo3
foo2

总结

本文详细介绍了 JavaScript 的执行机制，其中包括词法作用域、变量声明及初始化、函数声明及函数表达式、闭包、异步编程等内容。我们通过两个示例展示了 JavaScript 的执行顺序以及异步回调的特性。熟悉 JavaScript 的执行机制，对于编写高质量的代码和排查代码问题都是非常有帮助的。