Điều gì xảy ra khi chạy một chương trình JavaScript?

Thực sự thì “chương trình JavaScript được JS Engine thực thi như thế nào?” là câu hỏi mình code JavaScript khá lâu những vẫn chưa thực sự hiểu rõ.

Để hiểu về cách chương trình JavaScript hoạt động, có hai khái niệm cần hiểu là:

“Execution Context” và “CallStack”

Execution Context

Mọi thứ trong JavaScript diễn ra bên trong một “Execution Context”.
(ngữ cảnh thực thi)

Có hai giai đoạn trong “Execution Context” gồm:

Giai đoạn “Memory Creation” (cấp phát bộ nhớ)là lúc tất cả các biến và hàm được cấp phát bộ nhớ dưới dạng key: value. Một tên khác cho phần này là “Variable Environment”

Giai đoạn “Code Execution” (thực thi code) là lúc code được thực thi theo thứ tự từ trên xuống dưới, từng dòng một. Một tên khác cho phần này là “Thread of Execution”

Vì thế:

JavaScript is a synchronous single-threaded language

Mô tả chi tiết một chương trình JS thực thi

Giả sử có chương trình tính bình phương như sau:

1. let n = 2;
2. function square(num) {
3. 	let ans = num. * num;
4. 	return ans;
5. }
6. const square2 = square(n);
7. const square4 = square(4);

Khi chương trình JS khởi chạy, một execution context ở global sẽ được tạo.

Global Execution Context

Global Execution Context – Giai đoạn “Memory Creation”

Ở giai đoạn “Memory Creation Phase”, bộ nhớ được cấp cho tất cả các biến và các hàm.

Chương trình bắt đầu đọc từ trên xuống dưới và cấp bộ nhớ:

– Dòng 1 cấp biến n với undefined

– Dòng 2 cấp cho hàm square bộ nhớ cho toàn bộ nội dung của nó,

– Dòng 6 cấp biến square2 với undefined

– Dòng 7 cấp biến square4 với undefined

Global Execution Context – Giai đoạn “Code Execution”

Tiếp tục qua giai đoạn “Code Execution”, code sẽ được thực thi theo thứ tự:

– Dòng 1, gán 2 cho biến n

– Dòng 2 đến 5 bỏ qua vì không có gì để thực thi

– Dòng 6, hàm square(2) được gọi, một execution context giành riêng cho hàm này được tạo, mình tạm gọi là “square execution context”

"square(2)" Execution Context - Memory Creation

– Giai đoạn Memory Creation Phase của “square execution context”, cấp bộ nhớ cho num và ans

"square(2)" Execution Context - Code Execution

– Giai đoạn Code Execution của “square execution context”, thực thi:

– Dòng 2, num được gán giá trị là 2 từ đầu vào khi gọi hàm square(n)

– Dòng 3, ans được gán giá trị 2 * 2, là 4.

– Dòng 4, trả về giá trị của ans cho global execution context ở dòng số 6, là nơi gọi hàm square(n). Sau khi trả về giá trị, toàn bộ square execution context bị xóa đi.

"square(4)" Execution Context

– Dòng 7, hàm square(4) được gọi, một execution context giành riêng cho hàm này được tạo, mình tạm gọi là “square 4 execution context”

– Hai giai đoạn tương tự như khi gọi square(2) ở trên

– Dòng 4, trả về giá trị của ans cho global execution context ở dòng số 7, là nơi gọi hàm square(4)

CallStack

Đặt các execution context theo thứ tự được thêm vào và bị xóa đi vào một ngăn xếp, ta được

call stack

– Mỗi execution context được tạo sẽ được bỏ vào(push) vào ngăn xếp(stack)

– Mỗi execution context bị xóa sẽ được lấy ra khỏi(pop) ngăn xếp(stack)

Định nghĩa "callstack"

Từ MDN web docs:

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions

Một call stack (ngăn xếp cuộc gọi) là một cơ chế để trình thông dịch (như JS Engine) theo dõi vị trí của nó trong tập lệnh có nhiều hàm – hàm nào đang được chạy, hàm đang chạy gọi từ hàm nào.

Còn hiểu theo những gì mình đã phân tích ở trên với execution context thì:

Call Stack maintain the “order of execution” of execution contex

Callstack chứa toàn bộ các execution contexts theo thứ tự chúng được khởi tạo, và hoạt động theo nguyên lý LIFO (last-in-first-out). Vì thế, mặc định JavaScript hoạt động synchronous.

Giới thiệu stack overflow

stack overflow là hiện tượng không còn bộ nhớ để cấp cho stack, gây lỗi

“Maximum call stack size exceeded”

Ví dụ như khi một hàm được gọi đệ quy vô tận.

function callMySelf() {
    callMySelf()
}
callMySelf()

Thử nghiệm trên devtools

Bạn có thể trực tiếp xem được callstack của chương trình với devtools của Chrome. Hình minh họa sau được mình lấy bằng cách chạy chương trình trên với breakpoint ở dòng số 4 trong hàm square khi gọi với square(n)