HomeLập trìnhJavaScriptNgăn xếp cuộc...

Ngăn xếp cuộc gọi JavaScript – Nó là gì và tại sao nó cần thiết


Công cụ JavaScript (được tìm thấy trong môi trường lưu trữ như trình duyệt), là một trình thông dịch đơn luồng bao gồm một đống và một ngăn xếp lệnh gọi. Trình duyệt cung cấp các API web như DOM, AJAX và Bộ hẹn giờ.

Bài viết này nhằm mục đích giải thích ngăn xếp cuộc gọi là gì và tại sao nó lại cần thiết. Sự hiểu biết về ngăn xếp cuộc gọi sẽ giúp làm rõ cách thức hoạt động của “thứ tự phân cấp chức năng và thứ tự thực thi” trong công cụ JavaScript.

Ngăn xếp cuộc gọi chủ yếu được sử dụng để gọi hàm (gọi). Vì ngăn xếp cuộc gọi là đơn lẻ nên việc thực thi (các) chức năng được thực hiện lần lượt từ trên xuống dưới. Nó có nghĩa là ngăn xếp cuộc gọi là đồng bộ.

Sự hiểu biết về ngăn xếp cuộc gọi là rất quan trọng đối với Lập trình không đồng bộ (mà chúng ta sẽ xem xét trong một bài viết sau).

Trong JavaScript không đồng bộ, chúng tôi có chức năng gọi lại, vòng lặp sự kiện và hàng đợi tác vụ. Chức năng gọi lại được thực hiện bởi ngăn xếp cuộc gọi trong khi thực hiện sau khi chức năng gọi lại đã được đẩy vào ngăn xếp bởi vòng lặp sự kiện.

Nhưng trước khi chúng ta nhảy súng, trước tiên chúng ta hãy cố gắng trả lời câu hỏi – ngăn xếp cuộc gọi là gì?

Đọc thêm  Làm tổ cho các vòng lặp trong JavaScript

Ở cấp độ cơ bản nhất, ngăn xếp cuộc gọi là một cấu trúc dữ liệu sử dụng nguyên tắc Nhập sau, Xuất trước (LIFO) để tạm thời lưu trữ và quản lý lời gọi hàm (gọi).

Hãy phá vỡ định nghĩa của chúng tôi:

LIFO: Khi chúng ta nói rằng ngăn xếp cuộc gọi, hoạt động theo nguyên tắc cấu trúc dữ liệu Vào sau, ra trước, điều đó có nghĩa là hàm cuối cùng được đẩy vào ngăn xếp là hàm đầu tiên được bật ra khi hàm trả về.

Chúng ta hãy xem một mẫu mã để chứng minh LIFO bằng cách in lỗi theo dõi ngăn xếp ra bàn điều khiển.

function firstFunction(){
  throw new Error('Stack Trace Error');
}

function secondFunction(){
  firstFunction();
}

function thirdFunction(){
  secondFunction();
}

thirdFunction();

Khi mã được chạy, chúng tôi gặp lỗi. Một ngăn xếp được in cho biết cách các chức năng được xếp chồng lên nhau. Hãy nhìn vào sơ đồ.

zOINLHPC8E56ac8yyINYOFWeImsjM2Wk2rdU
Lỗi theo dõi ngăn xếp

Bạn sẽ nhận thấy rằng việc sắp xếp các chức năng dưới dạng ngăn xếp bắt đầu bằng firstFunction() (là hàm cuối cùng được đưa vào ngăn xếp và được bật ra để báo lỗi), theo sau là secondFunction()và sau đó thirdFunction() (là chức năng đầu tiên được đẩy vào ngăn xếp khi mã được thực thi).

Lưu trữ tạm thời: Khi một chức năng được gọi (được gọi), chức năng, tham số của nó và các biến được đẩy vào ngăn xếp cuộc gọi để tạo thành khung ngăn xếp. Khung ngăn xếp này là một vị trí bộ nhớ trong ngăn xếp. Bộ nhớ bị xóa khi hàm trả về khi nó bật ra khỏi ngăn xếp.

Đọc thêm  Hướng dẫn cơ bản về các phương thức mảng JavaScript
QgR2uIk7tW0YNz0Xm8g0jAPeRFI0e4sCejsv
Tín dụng hình ảnh: CMU

Quản lý lời gọi hàm (call): Ngăn xếp cuộc gọi duy trì một bản ghi về vị trí của từng khung ngăn xếp. Nó biết chức năng tiếp theo sẽ được thực thi (và sẽ loại bỏ nó sau khi thực hiện). Đây là điều làm cho việc thực thi mã trong JavaScript trở nên đồng bộ.

Hãy tưởng tượng bạn đang đứng xếp hàng tại một điểm rút tiền ở cửa hàng tạp hóa. Bạn chỉ có thể được chăm sóc sau khi người trước mặt bạn đã được chăm sóc. Đó là đồng bộ.

Đây là những gì chúng tôi có nghĩa là “quản lý lời gọi chức năng”.

Làm thế nào để ngăn xếp cuộc gọi xử lý các cuộc gọi chức năng?

Chúng ta sẽ trả lời câu hỏi này bằng cách xem mã mẫu của một hàm gọi một hàm khác. Đây là mã ví dụ:

function firstFunction(){
  console.log("Hello from firstFunction");
}

function secondFunction(){
  firstFunction();
  console.log("The end from secondFunction");
}

secondFunction();
oEp65Ec9CD4CnL7t0uSPoyzrkA1i1BR-Ij1n
Đây là đầu ra

Đây là những gì xảy ra khi mã được chạy:

1. Khi nào secondFunction() được thực thi, một khung ngăn xếp trống được tạo. Đây là điểm vào chính (ẩn danh) của chương trình.
2. secondFunction() sau đó gọi firstFunction()được đẩy vào ngăn xếp.
3. firstFunction() trả về và in “Xin chào từ chức năng đầu tiên” ra bàn điều khiển.
4. firstFunction() được bật ra khỏi ngăn xếp.
5. Lệnh thực hiện rồi chuyển đến secondFunction().
6. secondFunction() trả về và in “The end from secondFunction” ra bàn điều khiển.
7. secondFunction() được bật ra khỏi ngăn xếp, xóa bộ nhớ.

Đọc thêm  Phân tích các biểu thức toán học bằng JavaScript

Điều gì gây ra lỗi tràn ngăn xếp?

Tràn ngăn xếp xảy ra khi có một hàm đệ quy (một hàm gọi chính nó) mà không có điểm thoát. Trình duyệt (môi trường lưu trữ) có lệnh gọi ngăn xếp tối đa mà nó có thể đáp ứng trước khi đưa ra lỗi ngăn xếp.

Đây là một ví dụ:

function callMyself(){
  callMyself();
}

callMyself();

Các callMyself() sẽ chạy cho đến khi trình duyệt đưa ra thông báo “Vượt quá kích thước cuộc gọi tối đa”. Và đó là lỗi tràn ngăn xếp.

lvjT-ud6XfVQ5KYVWxZZWkKeVTgtJqFD0pWv
Lỗi ngăn xếp cuộc gọi tối đa

Tóm tắt

Các điểm chính từ ngăn xếp cuộc gọi là:
1. Nó là một luồng. Có nghĩa là nó chỉ có thể làm một việc tại một thời điểm.
2. Thực thi mã đồng bộ.
3. Một lời gọi hàm tạo ra một khung ngăn xếp chiếm một bộ nhớ tạm thời.
4. Nó hoạt động như một cấu trúc dữ liệu LIFO — Nhập sau, xuất trước.

Chúng tôi đã sử dụng bài viết ngăn xếp cuộc gọi để đặt nền tảng cho một loạt bài mà chúng tôi sẽ xem xét về JavaScript không đồng bộ (mà chúng tôi sẽ xem xét trong một bài viết khác).

Tất cả các mẫu mã có thể được tìm thấy trong repo GitHub này.

Cảm ơn bạn đã đọc. Nếu bài viết này hữu ích xin vui lòng cho nó một số vỗ tay? để những người khác có thể tìm thấy nó. Tôi cũng muốn đọc ý kiến ​​​​của bạn.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status