Execution Context

Execution context là nơi mà JavaScript code được thực thi. Mỗi lần ta gọi một function thì sẽ có một function execution context được tạo ra cho function đó và code của function đó sẽ được thực thi bên trong function execution context đó. Code của global thì sẽ được thực thi trong global execution context - được khởi tạo khi chương trình JavaScript được chạy.

Execution context gồm có 2 phần:

• Thread of execution: Đi qua từng dòng code và thực thi từng dòng.
• Memory: Lưu dữ liệu (variables) và code (function) để sử dụng.

Call Stack

Call stack giúp theo dõi chúng ta đang ở execution context nào - nghĩa là function nào đang được thực thi. Và giúp ta xác định sau khi hoàn thành function đó thì sẽ trở về nơi nào để tiếp tục thực thi. Nó hoạt động theo cơ chế LIFO (last in first out).

Ví dụ

Chương trình của chúng ta như sau:

Khi chúng ta run đoạn code ở trên, một global execution context sẽ được tạo ra kèm global memory, call stack lúc này thì chúng ta đang ở global()

Tiếp theo đó, thread of execution đi qua từng dòng code và thực thi lần lượt như sau:

• Dòng code 1: Ta khai báo một constant num ở global memory và gán giá trị cho nó là 3.
• Dòng code 3: Chúng ta khai báo function multiplyBy2 ở global memory.
• Dòng code 8: Chúng ta khai báo một constant output và giá trị của nó lúc này chưa xác định, tại sao? Tại vì bên phải của nó là multiplyBy2(num), chúng ta giải quyết bằng cách gọi function multiplyBy2 và truyền vào argument num: 3.

Như ta đã tìm hiểu, mỗi khi một function được gọi thì sẽ có một function execution context tương ứng được tạo ra. Call stack cũng sẽ làm nhiệm vụ của nó là theo dõi xem chương trình chúng ta đang ở execution context nào.

Toàn cảnh lúc này:

Lúc này chúng ta đang ở function execution context của multiplyBy2(3), và thread of execution lại tiếp tục:

• Điều đầu nó thực thi là gán giá trị cho parameter inputNumber: 3
• Tiếp theo nó thực thi dòng code đầu tiên của function multiplyBy2: khai báo constant result và gán giá trị cho nó là inputNumber * 2: 6
• Tiếp theo với dòng code return result;:
  1. JavaScript sẽ đi đến local memory và tìm giá trị của result: 6,
  2. Lấy giá trị đó return (trả về) cho constant output ở global memory.

Vậy là đã hoàn thành dòng code thứ 8, function execution context ở trên sẽ được cleared, call stack lúc này sẽ đẩy multiplyBy2(3) ra khỏi stack và trở lại global().

• Tiếp tục thực thi Dòng code 9: const newOutput = multiplyBy2(10);, tương tự khi thực thi dòng code 8:
  • multiplyBy2(10) sẽ được đẩy vào call stack
  • Một function execution context tương ứng được tạo
  • Thực thi từng dòng, và trả giá trị đã tính toán được cho newOutput ở global memory

Toàn cảnh lúc này:

Vậy là đã hoàn thành dòng code thứ 9, function execution context ở trên sẽ được cleared, call stack lúc này sẽ đẩy multiplyBy2(10) ra khỏi stack và trở lại global().

Vì chương trình đã hoàn thành nên global execution context cũng sẽ được cleared luôn.

Kết bài

Vậy là chúng ta đã cùng nhau tìm hiểu về execution context và call stack.

Cảm ơn mọi người đã đọc, em/mình đang học JavaScript và viết bài này, mong nhận được góp ý của mọi người để hoàn chỉnh bài viết cũng như để lại tài liệu cho những người mới học khác.