現代網頁中最為常見的三大技術之一就是 JavaScript，而 JavaScript 代碼的執行方式也是開發者需要了解的重點。本文將詳細介紹 JavaScript 代碼是如何執行的，包括解釋器流程、作用域及執行上下文、變量提升、作用域鏈、執行棧等核心知識點。

JavaScript 是一種解釋執行的腳本語言，即 JavaScript 代碼是通過解釋器執行的，而非像編譯型語言一樣需要先將代碼編譯成機器碼再執行。當瀏覽器遇到 JavaScript 代碼時，解釋器會逐行解釋代碼并執行代碼。

// 示例代碼
var name = 'Lucy';
console.log('Hello ' + name + '!');

上面的代碼為一個簡單的 JavaScript 程序，其中第一行代碼定義了一個變量 name 并賦值為 'Lucy'，第二行代碼使用 console.log() 在控制臺輸出 'Hello Lucy!'。當瀏覽器遇到該段代碼時，解釋器會按照代碼的順序逐行解釋和執行代碼。

在 JavaScript 中，全局作用域和函數作用域是最為常見的兩種作用域，不同作用域下的變量是不能相互訪問的。當解釋器進行變量訪問時，會首先在當前作用域查找變量，如果未找到再向父級作用域查找變量，一直到找到為止。這個過程形成的是一個作用域鏈。

// 示例代碼
var a = 1; // 全局作用域變量
function foo() {
var b = 2; // 函數作用域變量
console.b('a: ' + a); // 1
}
foo();

上面的代碼中，a 為全局作用域變量，b 為函數作用域變量。當 JavaScript 解釋器執行 foo() 函數時，會首先在 foo 函數作用域查找變量 b，如果找不到再通過作用域鏈向父級作用域查找 a 變量。

在 JavaScript 中，除了全局作用域之外，每個函數都有一個執行上下文，代表著函數執行時上下文環境的對象，存儲著函數內部變量和函數的“內部狀態”。函數執行上下文也是通過作用域鏈的形式來查找變量的。

// 示例代碼
var a = 1; // 全局作用域變量
function foo() {
var b = 2; // 函數作用域變量
console.b('a: ' + a); // 1
console.b('b: ' + b); // 2
}
foo();

上面的代碼中，除了全局作用域變量 a 之外，函數 foo 中的 b 變量也是需要通過執行上下文的形式來查找的。

在 JavaScript 中，變量提升是一個重要的概念。變量提升指的是 JavaScript 解釋器在執行代碼之前會將變量和函數聲明提升至當前作用域的最頂端，即無論變量聲明和函數聲明的位置在哪里，它們都會被“提升”到當前作用域的最頂部。

// 示例代碼
foo();
function foo() {
console.log('Hello world!');
}

上面的代碼中，函數 foo 的聲明被提升到了代碼最前面，所以 foo 函數可以在調用之前使用。

最后需要介紹的是執行棧，執行棧是 JavaScript 引擎中的一個重要部分。執行棧是一個后進先出的數據結構，每當執行一個函數時，都會將該函數添加到執行棧中，執行完該函數后，會將該函數從執行棧中彈出。

多個函數調用時，執行棧的數據結構如下：

// 示例代碼
function foo() {
return 1 + 1;
}
function bar() {
return foo() + 2;
}
console.log(bar()); // 4

上面的代碼包含了兩個函數 foo 和 bar，當 JavaScript 解釋器執行 bar 函數時，會將 bar 函數添加到執行棧中，然后在執行 bar 函數時會調用 foo 函數，于是將 foo 函數添加到執行棧中。當 foo 函數執行完畢后，會從執行棧中彈出，繼續執行 bar 函數。

綜上，本文對 JavaScript 代碼的執行方式進行了詳細的介紹，包括了解釋器流程、作用域及執行上下文、變量提升、作用域鏈、執行棧等核心知識點。對于開發者來說，掌握這些知識點能夠更好地優化編寫的 JavaScript 代碼，提高程序的效率及代碼的可維護性。