Execution Context trong JavaScript: Hành trình từ "Bếp Núc" đến Call Stack

Hãy tưởng tượng Execution Context (Ngữ cảnh thực thi) giống như một căn bếp.

• Trước khi bạn bắt đầu nấu (tức là thực thi code),
• Bạn cần không gian làm việc và các công cụ nấu nướng (tương đương với biến - variables),
• Và công thức nấu ăn (tương đương với functions).

Vậy nên, ở đây Execution Context chính là giai đoạn chuẩn bị hoặc quá trình "set up" đó.

Đầu tiên, Các loại "Hộp"

Bạn cần biết rằng JavaScript không chạy mã trong một chồng rác hỗn độn. Nó tạo ra các ngữ cảnh cụ thể cho từng phần công việc:

• Global Execution Context (GEC): Đây là "hộp" mặc định. Nếu mã của bạn không nằm bên trong một hàm, nó sẽ nằm ở đây. GEC tự động tạo ra hai thứ: đối tượng window (trong trình duyệt) và từ khóa đặc biệt this.
• Functional Execution Context (FEC): Mỗi khi bạn gọi một hàm, JavaScript sẽ tạo ra một "hộp" mini mới dành riêng cho hàm đó. Đây là nơi lưu trữ các biến và logic cụ thể cho nhiệm vụ đó.

Thứ hai, Hai Giai đoạn (Thủ thuật "Phép thuật")

JavaScript không chỉ đơn thuần đọc mã từ trên xuống dưới và thực thi ngay lập tức. Nó thực hiện hai lần quét trong "hộp" của bạn một cách gần như tức thì.

Giai đoạn A: Giai đoạn Tạo lập (Alokasi Memori)

Trước khi bất kỳ dòng mã nào thực sự "chạy", engine (động cơ) của JavaScript sẽ quét mã của bạn và:

• Tạo ra Đối tượng Toàn cục (window).
• Chuẩn bị Không gian bộ nhớ cho các biến và hàm.
• Hoisting: Nó thiết lập các khai báo biến thành undefined và lưu trữ toàn bộ khai báo hàm vào bộ nhớ.

Giai đoạn B: Giai đoạn Thực thi

Chỉ đến giai đoạn này, engine mới đi qua mã từng dòng một. Nó gán giá trị thực tế cho các biến của bạn (ví dụ: thay đổi undefined thành "Xin chào Thế giới") và chạy các hàm.

Thứ ba, Call Stack: Cách JS Giữ mọi thứ Trật tự

Vì JavaScript có tính chất single-threaded (chỉ có thể làm một việc tại một thời điểm), nó sử dụng Call Stack (Ngăn xếp cuộc gọi) để theo dõi xem "hộp" nào đang được xử lý.

Hãy tưởng tượng một chồng khoai tây chiên Pringles:

• Global Context là chiếc khoai tây nằm ở đáy cùng.
• Khi bạn gọi hàm A(), một chiếc khoai tây mới (Context A) được đặt lên trên.
• Nếu hàm A gọi hàm B, Context B lại được đặt lên trên A.
• Khi hàm B hoàn thành, nó bị "vứt bỏ" (popped) khỏi chồng. Chúng ta quay lại A.