Các Hàm, Luồng và Thực thi Bất đồng bộ trong JavaScript
Bạn cần hiểu cách thức hoạt động bên dưới của JavaScript.
Dưới đây là phân tích chi tiết về các hàm, tiến trình, luồng và các kiểu thực thi.
Các loại Hàm JavaScript
- Hàm có tên (Named Function): Sử dụng một cái tên cụ thể. Điều này giúp việc gỡ lỗi (debugging) trở nên dễ dàng.
- Hàm ẩn danh (Anonymous Function): Không có tên. Bạn thường sử dụng chúng làm callback.
- Biểu thức hàm (Function Expression): Bạn gán một hàm cho một biến.
- Hàm mũi tên (Arrow Function): Một cú pháp ngắn gọn hơn sử dụng ký hiệu =>.
- IIFE: Một Biểu thức hàm được gọi ngay lập tức (Immediately Invoked Function Expression). Nó chạy ngay khi bạn vừa định nghĩa xong.
Tiến trình (Process) so với Luồng (Thread)
Một Tiến trình (Process) là một chương trình đang chạy trên máy tính của bạn.
- Mỗi tiến trình có vùng nhớ riêng.
- Nếu một tiến trình bị lỗi (crash), các tiến trình khác vẫn tiếp tục chạy.
- Ví dụ: Chrome và Spotify là các tiến trình riêng biệt.
Một Luồng (Thread) là một đơn vị nhỏ bên trong một tiến trình.
- Các luồng chia sẻ cùng một vùng nhớ.
- Chúng cho phép một chương trình duy nhất thực hiện nhiều việc cùng một lúc.
- Ví dụ: Bên trong Chrome, một luồng sẽ render một trang web trong khi một luồng khác xử lý các cú nhấp chuột của bạn.
Đồng bộ (Synchronous) so với Bất đồng bộ (Asynchronous)
JavaScript là đơn luồng (single-threaded). Nó xử lý từng tác vụ một bằng cách sử dụng một call stack.
Thực thi Đồng bộ (Synchronous Execution):
- Các tác vụ chạy nối tiếp nhau.
- Mỗi tác vụ phải chờ tác vụ trước đó hoàn thành.
- Các tác vụ chậm sẽ chặn (block) mã của bạn không thể chạy tiếp.
Thực thi Bất đồng bộ (Asynchronous Execution):
- Các tác vụ chạy ngầm (in the background).
- Mã không bị dừng lại trong khi chờ một tác vụ hoàn thành.
- Điều này sử dụng Web APIs, Callback Queue và Event Loop.
Cách thức hoạt động của Bất đồng bộ:
- JavaScript gửi một tác vụ (như bộ hẹn giờ) đến Web API.
- Mã chính tiếp tục chạy.
- Khi tác vụ hoàn thành, nó sẽ được chuyển đến Callback Queue.
- Event Loop sẽ chuyển nó vào Call Stack khi stack trống.
Điều này giúp các ứng dụng web của bạn luôn nhanh và phản hồi tốt.