Chương trình Giáo dục Kỹ thuật (EngEd) này được hỗ trợ bởi Mục. Triển khai tức thì các container trên nhiều nhà cung cấp đám mây trên toàn cầu
Dùng thử miễn phí
Điều gì xảy ra khi JavaScript chạy mã của tôi?29 Tháng Mười
- chủ đề
- ngôn ngữ
Giới thiệu
JavaScript là ngôn ngữ đơn luồng, trong đó chỉ có một lệnh thực thi tại một thời điểm. Nó có một mô hình thực thi Đồng bộ, trong đó mỗi dòng được thực hiện theo từng dòng, từ trên xuống dưới. Trong hướng dẫn này, bạn sẽ tìm hiểu điều gì sẽ xảy ra khi công cụ JavaScript xử lý mã của bạn
điều kiện tiên quyết
Trước khi bạn bắt đầu hướng dẫn này, bạn sẽ cần những điều sau đây
- Hiểu biết về các Hàm JavaScript
Bước 1 — Điều gì xảy ra khi JavaScript thực thi mã của tôi?
1. const num = 3; 2. function multiplyBy2 (inputNumber){ 3. const result = inputNumber*2; 4. return result; 5. } 6. const name = "Will"
Trong bước này, bạn sẽ lướt qua các dòng mã ở trên giống như công cụ JavaScript sẽ. Điều này giúp bạn hiểu điều gì sẽ xảy ra khi bạn thực thi đoạn mã trên
Ngay khi bạn bắt đầu thực thi mã của mình, có hai nửa quá trình đó
- Một, quá trình xem từng dòng mã của bạn, từ trên xuống dưới. Được gọi là Chủ đề thực hiện
- Thứ hai, việc lưu trữ các bit dữ liệu mà bạn thông báo khi bạn thực hiện mã của mình trong Bộ nhớ trực tiếp. Được gọi là môi trường biến
Cùng nhau, được gọi là Bối cảnh thực thi. Trong đó một bối cảnh là một không gian để làm một cái gì đó. Trong trường hợp này, đó là không gian nơi bạn sẽ thực thi mã của mình, do đó nó được gọi là bối cảnh thực thi
Có hai loại Bối cảnh thực thi
- Bối cảnh thực thi toàn cầu
- Bối cảnh thực thi cục bộ
Dưới đây là bảng minh họa Bối cảnh thực thi toàn cầu của bạn trước khi thực thi mã
Đối với mỗi dòng, sẽ có một biểu diễn trực quan về bối cảnh thực thi toàn cầu trông như thế nào tại thời điểm đó
Dòng 1. Lưu vào bộ nhớ một hằng số, num, làm nhãn cho một số nguyên, 3
Dòng 2. Bạn đạt được một từ khóa JavaScript, chức năng
Từ khóa hàm có nghĩa là, lưu trong bộ nhớ multiBy2, làm nhãn cho chức năng của hàm, multiplyBy2() (ký hiệu là -f- trong hình ảnh)
Quá trình này còn được gọi là xác định/khai báo hàm
Tại thời điểm này, nếu bạn đã chạy
console.log(multiplyBy2.toString());
Bạn sẽ thấy mã nguồn của multiplyBy2()
Để hiểu những gì toString() xem Tài liệu MDN
Từ dòng 2, bạn sẽ chuyển sang dòng 6 chứ không phải dòng 3
Điều này là do trong JavaScript, bạn không đi vào phần thân của hàm cho đến khi nó được gọi. Và chức năng của chúng tôi multiplyBy2() trong trường hợp này, được xác định, nhưng không bao giờ được gọi
Dòng 6. Lưu vào bộ nhớ một hằng số, tên, làm nhãn cho một chuỗi, “Will”
Trong bước tiếp theo, bạn sẽ thấy
- Khi bối cảnh thực thi cục bộ được tạo
- Điều gì xảy ra dưới mui xe trong quá trình đó
Bước 2 — Điều gì xảy ra khi một chức năng được thực thi trong JavaScript?
1. const num = 3; 2. function multiplyBy2 (inputNumber){ 3. const result = inputNumber*2; 4. return result; 5. } 6. const output = multiplyBy2(4);
Khi bạn thực thi các chức năng, bạn sẽ chuyển ngữ cảnh thực thi. Từ Toàn cầu đến Địa phương và trở lại Toàn cầu
Việc chuyển đổi Bối cảnh thực thi này làm phát sinh, trong JavaScript, một vấn đề theo dõi vị trí của một người trong Chủ đề thực thi của họ
Để theo dõi điều này, JavaScript sử dụng Call Stack
Bây giờ bạn có một yếu tố thứ ba để thực thi mã JavaScript của mình, ngăn xếp cuộc gọi. Hình ảnh dưới đây minh họa ba yếu tố trước khi bất kỳ đoạn mã nào được thực thi
Bây giờ bạn sẽ thấy chính xác cách call stack phát huy tác dụng tại đây
Dòng 1. Lưu vào bộ nhớ một hằng số, num, làm nhãn cho một số nguyên, 3
Dòng 2. Lưu vào bộ nhớ multiBy2, làm nhãn cho chức năng của hàm, multiplyBy2()
Dòng 6. Lưu vào bộ nhớ một hằng số, đầu ra, làm nhãn cho bất kỳ kết quả nào mà hàm multiplyBy2() trả về sau khi thực hiện
Lúc này, bạn gọi. multiplyBy2()
Điều này thêm multiplyBy2() vào ngăn xếp cuộc gọi. Nó tạo ra một Bối cảnh thực thi cục bộ để thực thi mã bên trong multiplyBy2()
Như minh họa trong hình bên dưới
Khi đã ở trong Bối cảnh thực thi cục bộ, bạn tiếp tục với hai phần của bối cảnh thực thi
Mã được thực thi trong trường hợp này là phần thân của multiplyBy2(). Trong JavaScript, bạn đi vào phần thân của một hàm khi nó được gọi
dòng 3. Lưu vào bộ nhớ một hằng số, kết quả, làm nhãn cho tích của đối số inputNumber và một số nguyên 2, một số nguyên, 8
dòng 4. Sau đó, từ khóa return kết thúc quá trình thực thi hàm và chỉ định một giá trị sẽ được trả về cho người gọi hàm
Sau đó, bạn quay lại Bối cảnh thực thi toàn cầu
Một vài điều xảy ra khi bạn làm
- Rác JavaScript thu thập Môi trường biến đổi của ngữ cảnh thực thi cục bộ (Bộ nhớ)
- Ngăn xếp cuộc gọi bị xóa
- Giá trị trả về được gán cho đầu ra không đổi
Hình ảnh bên dưới minh họa Bối cảnh thực thi toàn cầu sau khi tất cả điều này được thực hiện
Sau khi tất cả các dòng mã được thực thi, rác JavaScript sẽ thu thập Môi trường biến đổi của bối cảnh thực thi toàn cầu (Bộ nhớ)