Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu về ngăn xếp cuộc gọi JavaScript là cơ chế để theo dõi các cuộc gọi chức năng.: in this tutorial, you will learn about the JavaScript Call Stack which is a mechanism to keep track of the function calls.
Giới thiệu về ngăn xếp cuộc gọi JavaScript
Một ngăn xếp cuộc gọi là một cách để công cụ Java theo dõi vị trí của nó trong mã gọi nhiều chức năng. Nó có thông tin về chức năng nào hiện đang được chạy và các chức năng nào được gọi từ bên trong chức năng đó
Ngoài ra, công cụ JavaScript sử dụng ngăn xếp cuộc gọi để quản lý bối cảnh thực thi:call stack to manage execution contexts:
- Bối cảnh thực thi toàn cầu
- bối cảnh thực thi chức năng
Call Stack hoạt động dựa trên nguyên tắc LIFO, tức là, lần đầu tiên trước.
Khi bạn thực thi một tập lệnh, công cụ JavaScript sẽ tạo bối cảnh thực thi toàn cầu và đẩy nó lên đầu ngăn xếp cuộc gọi.
Bất cứ khi nào một hàm được gọi, công cụ JavaScript sẽ tạo bối cảnh thực thi chức năng cho hàm, đẩy nó lên đầu ngăn xếp cuộc gọi và bắt đầu thực thi chức năng.
Nếu một hàm gọi một hàm khác, công cụ JavaScript sẽ tạo bối cảnh thực thi chức năng mới cho hàm đang được gọi và đẩy nó lên đầu ngăn xếp cuộc gọi.
Khi chức năng hiện tại hoàn thành, động cơ JavaScript bật nó ra khỏi ngăn xếp cuộc gọi và tiếp tục thực hiện khi nó rời đi.
Kịch bản sẽ dừng khi ngăn xếp cuộc gọi trống.
Hãy bắt đầu với ví dụ sau:
Code language: JavaScript [javascript]
function add[a, b] { return a + b; } function average[a, b] { return add[a, b] / 2; } let x = average[10, 20];
Khi công cụ JavaScript thực thi tập lệnh này, nó đặt bối cảnh thực thi toàn cầu [được biểu thị bằng hàm main[]
hoặc global[]
trên ngăn xếp cuộc gọi.
Bối cảnh thực thi toàn cầu bước vào giai đoạn sáng tạo và chuyển sang giai đoạn thực thi.
Công cụ JavaScript thực hiện cuộc gọi đến hàm average[10, 20]
và tạo bối cảnh thực thi chức năng cho hàm average[]
và đẩy nó lên đầu ngăn xếp cuộc gọi:
Công cụ JavaScript bắt đầu thực thi average[]
vì chức năng average[]
nằm trên đỉnh của ngăn xếp cuộc gọi.
Hàm average[]
gọi hàm add[]
. Tại thời điểm này, công cụ JavaScript tạo ra một bối cảnh thực thi chức năng khác cho hàm add[]
và đặt nó lên đỉnh của ngăn xếp cuộc gọi:
Công cụ JavaScript thực thi chức năng add[]
và bật nó ra khỏi ngăn xếp cuộc gọi:
Tại thời điểm này, chức năng average[]
nằm trên đỉnh của ngăn xếp cuộc gọi, công cụ JavaScript thực thi và bật nó ra khỏi ngăn xếp cuộc gọi.
Bây giờ, ngăn xếp cuộc gọi trống nên tập lệnh dừng thực thi:
Hình ảnh sau đây minh họa trạng thái tổng thể của ngăn xếp cuộc gọi trong tất cả các bước:
Stack Overflow
Ngăn xếp cuộc gọi có kích thước cố định, tùy thuộc vào việc triển khai môi trường máy chủ, trình duyệt web hoặc node.js.
Nếu số lượng bối cảnh thực thi vượt quá kích thước của ngăn xếp, sẽ xảy ra lỗi tràn ngăn xếp.
Ví dụ: khi bạn thực thi chức năng đệ quy không có điều kiện thoát, công cụ JavaScript sẽ đưa ra lỗi tràn ngăn xếp:
function fn[] { fn[]; } fn[]; // stack overflow
Code language: JavaScript [javascript]
JavaScript không đồng bộ
JavaScript là ngôn ngữ lập trình đơn luồng. Điều này có nghĩa là động cơ JavaScript chỉ có một ngăn xếp cuộc gọi. Do đó, nó chỉ có thể làm một điều tại một thời điểm.
Khi thực thi tập lệnh, công cụ JavaScript thực hiện mã từ trên xuống dưới, từng dòng. Nói cách khác, nó đồng bộ.
Không đồng bộ có nghĩa là công cụ JavaScript có thể thực hiện các tác vụ khác trong khi chờ hoàn thành một nhiệm vụ khác. Ví dụ: động cơ JavaScript có thể:
- Yêu cầu dữ liệu từ một máy chủ từ xa.
- Hiển thị một spinner
- Khi dữ liệu có sẵn, hãy hiển thị nó trên trang web.
Để làm điều này, động cơ JavaScript sử dụng một vòng lặp sự kiện, sẽ được đề cập trong hướng dẫn tiếp theo.
Bản tóm tắt
- JavaScript Engine sử dụng ngăn xếp cuộc gọi để quản lý bối cảnh thực thi.
- Call Stack sử dụng cấu trúc dữ liệu ngăn xếp hoạt động dựa trên nguyên tắc LIFO [lần đầu tiên trước].
Hướng dẫn này có hữu ích không?