JavaScript hoạt động như thế nào ở hậu trường?

Hãy tìm hiểu sâu hơn và hiểu cách thực thi JavaScript bên trong công cụ trình duyệt:

Như chúng ta đã biết, JavaScript là ngôn ngữ lập trình đơn luồng, hướng đối tượng dựa trên nguyên mẫu, được biên dịch hoặc biên dịch tức thời, cấp cao, với các chức năng hạng nhất và mô hình đồng thời vòng lặp sự kiện không chặn.

Và nó ngày càng trở nên phổ biến hơn, Bài viết này nhằm mục đích tìm hiểu sâu hơn về JavaScript và cách nó thực sự hoạt động.

Tổng quan

Bài đăng trên blog này thân thiện với người mới bắt đầu và cũng hữu ích cho các nhà phát triển JS có kinh nghiệm.
Chúng ta sẽ xem xét chi tiết tất cả các khái niệm này và giải thích cách JavaScript thực sự chạy.

Trong bài đăng này, chúng ta sẽ thảo luận về Bối cảnh thực thi (giai đoạn tạo bộ nhớ & giai đoạn thực thi mã), thực thi CallStack & công cụ JavaScript và môi trường Thời gian chạy của nó. Ngoài ra, hiểu khái niệm về Event loop và Stack Flow.

Đây sẽ là hướng dẫn tổng quan về tất cả các thành phần cốt lõi có liên quan đến việc thực thi tập lệnh.
Ở đây chúng ta sẽ thảo luận về các thành phần sau:

1. Công cụ JavaScript.
2. Môi trường thời gian chạy JavaScript.
3. Bối cảnh thực hiện.
4. Thực thi ngăn xếp cuộc gọi & Luồng ngăn xếp.
5. Vòng lặp sự kiện.

Như bạn có thể đã nghe trước đây, JavaScript là một ngôn ngữ lập trình được thông dịch . Điều đó có nghĩa là mã nguồn không được biên dịch thành mã nhị phân trước khi thực thi.
Điều này có nghĩa là nó thực thi từng dòng một, nhưng nó không đúng 100%.
JS là ngôn ngữ được biên dịch đúng lúc (JIT), hành vi hiện đại này làm cho nó nhanh trong các ứng dụng web, nếu không, theo loại diễn giải, nó làm cho ứng dụng hiển thị chậm. Vì vậy, chúng tôi coi JS là ngôn ngữ biên dịch Just-in-time (JIT).

Công cụ JavaScript chỉ đơn giản là một chương trình máy tính thực thi mã JavaScript. Các công cụ JavaScript được tích hợp sẵn trong tất cả các trình duyệt hiện đại ngày nay.

Giống như: (Rất ít công cụ)
# V8 là Công cụ JavaScript dành cho Chrome.
# Khỉ nhện cho Mozilla Firefox.
# Chakra cho Microsoft Edge.
# Lõi JavaScript cho Safari, v.v.

Như chúng ta đã biết, công cụ trình duyệt Chrome “V8” rất phổ biến cho JavaScript,
Nó bao gồm hai thành phần chính:
1: Ngăn xếp cuộc gọi ( thảo luận chi tiết sau, hãy kiên nhẫn.. )
2: Heap : Đó là một không gian bộ nhớ phi cấu trúc nơi chứa tất cả các đối tượng hữu ích lưu trữ.

Môi trường thời gian chạy JavaScript (JRE) :

Như chúng ta đã thảo luận về công cụ JS, nhưng công cụ JS- chạy bên trong JRE cùng với một số thành phần khác. như một số yêu cầu và cuộc gọi không đồng bộ.
Các thành phần được liệt kê là:

1. Công cụ JS
2. API web
3. Hàng đợi gọi lại hoặc hàng đợi tin nhắn
4. vòng lặp sự kiện

Khi mã JS được chạy, bối cảnh thực thi toàn cầu (GEC) được tạo.
Quá trình thực thi này được tạo theo 2 giai đoạn:
1: Giai đoạn tạo bộ nhớ &
2: Giai đoạn thực thi mã.

Hãy lấy một ví dụ;

Đối với đoạn mã trên,
Đầu tiên, GEC được tạo & trong đó pha bộ nhớ được tạo và gán giá trị không xác định cho tất cả các biến & đặt toàn bộ khối chức năng {} làm giá trị fnxn trong không gian bộ nhớ của nó.

Thứ hai, bây giờ ở giai đoạn thứ 2, tức là giai đoạn thực thi mã, nó bắt đầu duyệt qua toàn bộ từng dòng mã.
Và nó tìm thấy var a = 3, vì vậy nó gán 3 cho một biến không xác định và
chuyển sang dòng tiếp theo và gán 4 cho biến b không xác định. Bây giờ chuyển sang dòng tiếp theo cho hàm add(), không có gì để thực thi, vì vậy nó vẫn giữ nguyên và chuyển sang dòng tiếp theo cho var c.

Tại dòng này, một bối cảnh thực thi mới được tạo, đặt tên là bối cảnh thực thi cục bộ cho hàm add(3,4), bây giờ lại tạo 2 giai đoạn,
Đối với giai đoạn tạo bộ nhớ , nó gán không xác định cho các biến num1, num2 & result. Sau đó, trong giai đoạn thực thi mã , nó bắt đầu từng dòng một trong khối chức năng { } của add().
Nó tìm thấy gán 3 cho num1 & 4 cho num2,
sau đó cho var result = num1+num2 và gán 7 cho biến kết quả.
Sau đó, kết quả trả về và quyền kiểm soát thực thi sẽ quay trở lại dòng 9 tại
var c = 7.

Khi bắt gặp từ khóa return , Nó trả về điều khiển cho dòng được gọi và ngữ cảnh thực thi chức năng cũng bị xóa.
Nó di chuyển đến dòng tiếp theo, dòng 10 : nó loại bỏ giá trị của c.

Đây là cách bối cảnh thực thi thực sự hoạt động đằng sau hiện trường.

Javascript quản lý việc tạo và xóa bối cảnh thực thi mã với sự trợ giúp của Call Stack ( chúng ta sẽ thảo luận sau về call stack )

Ngăn xếp cuộc gọi:

Call Stack duy trì thứ tự thực hiện các bối cảnh thực thi . Nó còn được gọi là ngăn xếp chương trình, ngăn xếp điều khiển, ngăn xếp thời gian chạy, ngăn xếp máy, ngăn xếp ngữ cảnh thực thi.
Và chúng tôi biết JS là một ngôn ngữ lập trình luồng đơn , có nghĩa là có một ngăn xếp duy nhất và thực thi từng dòng một.

Chỉ tham khảo mã ở trên và giải thích cách ngăn xếp cuộc gọi hoạt động cho cùng một đoạn mã.

Ở đây, GEC được tạo và rơi vào ngăn xếp, sau đó ngữ cảnh thực thi cục bộ tiếp theo được đưa vào ngăn xếp rồi sau khi thực thi, nó bật ra và quay lại GEC.
Sau đó, console.log(c) được bật vào và sau khi thực thi, nó bật ra, sau đó quay trở lại GEC,
Sau khi thực hiện xong, GEC cũng bật ra khỏi ngăn xếp và ngăn xếp trở nên trống rỗng dưới dạng điều kiện IDLE.

Vòng lặp sự kiện:

Ngôn ngữ JavaScript cũng có thể được nhìn nhận theo hai cách — đồng bộ và không đồng bộ.

Trong JS đồng bộ, mã thực thi từng dòng một, có nghĩa là theo cách tuần tự, &
Trong JS không đồng bộ, không có gì là tuần tự, nghĩa là một dòng mã sẽ bị bỏ qua và được thực thi sau đó theo hành vi chủ yếu được gọi là API web.

Vì vậy, vòng lặp sự kiện được sử dụng để xử lý phần không đồng bộ với hàng đợi gọi lại và đợi ngăn xếp trống rồi gửi đến ngăn xếp để thực thi.

Vòng lặp sự kiện là một tính năng trong JS liên tục kiểm tra xem ngăn xếp chính có trống không. Và khi nó trống, nó sẽ kiểm tra Callback Queue. Nếu có các mã trong hàng đợi được thực thi, chúng sẽ được chuyển từng mã một vào ngăn xếp cuộc gọi. Sau khi mã được thực thi, nó rời khỏi ngăn xếp và mã tiếp theo trong hàng đợi xuất hiện cho đến khi hàng đợi trống.

Các bạn hãy kết thúc mọi thứ và hẹn gặp lại các bạn trong các bài viết sắp tới nhé……….