Khi chức năng JavaScript được thực thi?

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 đó

  1. 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
  2. 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

  1. Bối cảnh thực thi toàn cầu
  2. 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ã

Khi chức năng JavaScript được thực thi?

Đố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

Khi chức năng JavaScript được thực thi?

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

Khi chức năng JavaScript được thực thi?

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”

Khi chức năng JavaScript được thực thi?

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

Khi chức năng JavaScript đượ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 chức năng JavaScript được thực thi?

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

Khi chức năng JavaScript được thực thi?

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

Khi chức năng JavaScript được thực thi?

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ớ)

Các hàm JavaScript được thực thi theo thứ tự nào?

Thứ tự thực hiện là gì? .
ngăn xếp
Vòng lặp sự kiện
Hàng đợi nhiệm vụ
WebAPI/Tài nguyên bên ngoài

Làm cách nào để kiểm tra xem hàm có được khai báo trong JavaScript không?

Sử dụng toán tử typeof . Nếu hàm không được xác định, toán tử typeof trả về 'không xác định'.

Điều gì xảy ra khi bạn chạy một chương trình JavaScript?

Trong Giai đoạn thực thi mã, JavaScript là một ngôn ngữ luồng đơn lại chạy qua từng dòng mã và cập nhật các giá trị của hàm và biến được lưu trữ trong Giai đoạn cấp phát bộ nhớ trong Thành phần bộ nhớ