Hãy bắt đầu với một ví dụ và sau đó chúng tôi phân tích cách mã đó hoạt động ở hậu trường.

var x = 10;
var y = 20;

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

var result = add(x,y);

console.log(result) //30

Đầu tiên, khai báo các biến x & y và khởi tạo với vlaue 10 & 20 tương ứng.

Thứ hai, khai báo hàm add chấp nhận đối số và trả về tổng của các đối số, tức là 10 + 20 = 30.

Thứ ba, gọi hàm add với các đối số là giá trị của biến x & y và lưu trữ kết quả trong biến kết quả.

Cuối cùng, đầu ra của biến kết quả với console.

Trong khi chạy đoạn mã trên, JavaScript thực hiện nhiều việc.

Khi công cụ JavaScript thực thi mã JavaScript tại thời điểm đó, nó sẽ tạo ra ngữ cảnh thực thi.

Mỗi bối cảnh thực hiện có hai giai đoạn

1. Giai đoạn sáng tạo.
2. Giai đoạn thực hiện.

Khi công cụ JavaScript thực thi mã lần đầu tiên, nó sẽ tạo bối cảnh thực thi toàn cầu. Trong giai đoạn này, JavaScript thực hiện một số nhiệm vụ.

1. Tạo đối tượng toàn cầu, tức là cửa sổ trong trình duyệt web hoặc toàn cầu trong Node.js.
2. Tạo đối tượng này (từ khóa này) và liên kết nó với đối tượng toàn cầu, Trong trường hợp trình duyệt web, từ khóa này được đính kèm với đối tượng cửa sổ và trong Node js, từ khóa này được đính kèm với đối tượng toàn cầu.
3. Thiết lập một đống bộ nhớ để lưu trữ các tham chiếu hàm và biến.
4. Lưu trữ các khai báo hàm trong heap bộ nhớ và các biến trong ngữ cảnh thực thi chung với các giá trị ban đầu là không xác định.

1. Lưu trữ biến x, y & kết quả và khai báo hàm add() trong ngữ cảnh thực thi chung.
2. Khởi tạo các biến có giá trị không xác định tức là x = undefined , y = undefined và result = undefined .

Giai đoạn thực hiện

Trong giai đoạn thực thi, công cụ JavaScript thực thi từng dòng mã, gán các giá trị cho biến và thực hiện các lệnh gọi hàm.

Đối với mỗi lệnh gọi hàm, công cụ JavaScript tạo một lệnh gọi thực thi chức năng mới.

Bối cảnh thực thi chức năng tương tự như bối cảnh thực thi toàn cục. Nhưng thay vì tạo đối tượng toàn cục, công cụ JavaScript tạo đối tượng đối số tham chiếu đến tất cả các tham số của hàm.

Trong ví dụ của chúng tôi, công cụ JavaScript tạo một đối tượng đối số tham chiếu tất cả các tham số được truyền vào hàm và đặt giá trị này thành đối tượng toàn cầu trong trường hợp trình duyệt web, giá trị này được đính kèm với đối tượng cửa sổ và trong Node js, giá trị này được đính kèm với toàn cầu đối tượng và nó cũng khởi tạo tham số a & b với giá trị không xác định.

Trong giai đoạn thực thi của ngữ cảnh thực thi chức năng, công cụ JavaScript gán giá trị 10 & 20 cho tham số a & b và trả về kết quả (30) cho ngữ cảnh thực thi chung.

Để theo dõi tất cả các ngữ cảnh thực thi, bao gồm ngữ cảnh thực thi chung và ngữ cảnh thực thi chức năng, công cụ JavaScript sử dụng ngăn xếp cuộc gọi.

Hãy giữ liên lạc

Tôi hy vọng bài viết này có giá trị với bạn, hẹn gặp lại bạn ở bài viết tiếp theo!