JavaScript được thực thi ở đâu?
Nếu bạn đang hoặc muốn trở thành một nhà phát triển JavaScript, thì bạn phải biết cách các chương trình JavaScript được thực thi bên trong. Sự hiểu biết về bối cảnh thực thi và ngăn xếp thực thi là rất quan trọng để hiểu các khái niệm JavaScript khác như Nâng, Phạm vi và Đóng Show
Hiểu đúng khái niệm ngữ cảnh thực thi và ngăn xếp thực thi sẽ giúp bạn trở thành nhà phát triển JavaScript tốt hơn nhiều Vì vậy, không cần phải quảng cáo thêm, hãy bắt đầu. ) Mẹo. Sử dụng Bit để xây dựng ứng dụng JS nhanh hơn với các thành phần. Nó giúp bạn chia sẻ và tái sử dụng các thành phần với nhóm của mình, sử dụng chúng để xây dựng các ứng dụng mới. Hãy thử một lần Hợp tác và khám phá thành phần · BitBit là nơi các nhà phát triển chia sẻ các thành phần và hợp tác để cùng nhau xây dựng phần mềm tuyệt vời. Khám phá các thành phần được chia sẻ…chút. nhà phát triển Bối cảnh thực thi là gì? Nói một cách đơn giản, bối cảnh thực thi là một khái niệm trừu tượng về môi trường nơi mã Javascript được đánh giá và thực thi. Bất cứ khi nào bất kỳ mã nào được chạy trong JavaScript, nó sẽ chạy bên trong ngữ cảnh thực thi Các loại bối cảnh thực hiệnCó ba loại ngữ cảnh thực thi trong JavaScript
Ngăn xếp thực thi, còn được gọi là “ngăn xếp cuộc gọi” trong các ngôn ngữ lập trình khác, là ngăn xếp có cấu trúc LIFO (Last in, First out), được sử dụng để lưu trữ tất cả bối cảnh thực thi được tạo trong quá trình thực thi mã Khi công cụ JavaScript lần đầu tiên gặp tập lệnh của bạn, nó sẽ tạo ngữ cảnh thực thi toàn cầu và đẩy nó vào ngăn xếp thực thi hiện tại. Bất cứ khi nào công cụ tìm thấy một lệnh gọi hàm, nó sẽ tạo ngữ cảnh thực thi mới cho hàm đó và đẩy nó lên đầu ngăn xếp Công cụ thực thi chức năng có bối cảnh thực thi ở trên cùng của ngăn xếp. Khi chức năng này hoàn thành, ngăn xếp thực thi của nó sẽ được bật ra khỏi ngăn xếp và điều khiển sẽ chuyển đến ngữ cảnh bên dưới nó trong ngăn xếp hiện tại Hãy hiểu điều này với một ví dụ mã bên dưới let a = 'Hello World!';function first() { Khi đoạn mã trên tải trong trình duyệt, công cụ Javascript sẽ tạo ngữ cảnh thực thi toàn cầu và đẩy nó vào ngăn xếp thực thi hiện tại. Khi gặp lệnh gọi tới ExecutionContext = { 5, công cụ Javascript sẽ tạo ngữ cảnh thực thi mới cho chức năng đó và đẩy nó lên đầu ngăn xếp thực thi hiện tạiKhi hàm ExecutionContext = { 6 được gọi từ bên trong hàm ExecutionContext = { 5, công cụ Javascript sẽ tạo ngữ cảnh thực thi mới cho hàm đó và đẩy nó lên đầu ngăn xếp thực thi hiện tại. Khi hàm ExecutionContext = { 6 kết thúc, ngữ cảnh thực thi của nó sẽ được bật ra khỏi ngăn xếp hiện tại và điều khiển chuyển đến ngữ cảnh thực thi bên dưới nó, đó là ngữ cảnh thực thi hàm ExecutionContext = { 5Khi ExecutionContext = { 5 kết thúc, ngăn xếp thực thi của nó sẽ bị xóa khỏi ngăn xếp và quyền kiểm soát sẽ chuyển sang bối cảnh thực thi toàn cầu. Khi tất cả mã được thực thi, công cụ JavaScript sẽ xóa bối cảnh thực thi toàn cầu khỏi ngăn xếp hiện tạiBối cảnh thực thi được tạo ra như thế nào?Cho đến bây giờ, chúng ta đã thấy cách công cụ JavaScript quản lý ngữ cảnh thực thi, Bây giờ hãy hiểu cách một ngữ cảnh thực thi được tạo bởi công cụ JavaScript Bối cảnh thực thi được tạo theo hai giai đoạn. 1) Giai đoạn tạo và 2) Giai đoạn thực hiện Giai đoạn sáng tạoBối cảnh thực thi được tạo trong giai đoạn tạo. Những điều sau đây xảy ra trong giai đoạn tạo
Vì vậy, bối cảnh thực thi có thể được biểu diễn theo khái niệm như sau ExecutionContext = { Môi trường từ vựngCác tài liệu ES6 chính thức định nghĩa Lexical Environment là
Nói một cách đơn giản, Môi trường từ vựng là một cấu trúc chứa ánh xạ biến định danh. (ở đây định danh đề cập đến tên của biến/hàm và biến là tham chiếu đến đối tượng thực [bao gồm đối tượng hàm và đối tượng mảng] hoặc giá trị nguyên thủy) Ví dụ: xem xét đoạn mã sau ExecutionContext = { 1Vì vậy, môi trường từ vựng cho đoạn mã trên trông như thế này ExecutionContext = { 2Mỗi Lexical Environment có ba thành phần
Bản ghi môi trườngBản ghi môi trường là nơi lưu trữ các khai báo biến và hàm bên trong môi trường từ vựng Ngoài ra còn có hai loại hồ sơ môi trường
Lưu ý — Đối với mã hàm, bản ghi môi trường cũng chứa một đối tượng ExecutionContext = { 11 chứa ánh xạ giữa các chỉ mục và đối số được truyền cho hàm và độ dài (số) của các đối số được truyền vào hàm. Ví dụ: một đối tượng đối số cho hàm bên dưới trông như thế nàyExecutionContext = { 4Tham chiếu đến môi trường bên ngoàiTham chiếu đến môi trường bên ngoài có nghĩa là nó có quyền truy cập vào môi trường từ vựng bên ngoài của nó. Điều đó có nghĩa là công cụ JavaScript có thể tìm kiếm các biến bên trong môi trường bên ngoài nếu chúng không được tìm thấy trong môi trường từ vựng hiện tại Ràng buộc nàyTrong thành phần này, giá trị của ExecutionContext = { 2 được xác định hoặc đặtTrong bối cảnh thực thi toàn cầu, giá trị của ExecutionContext = { 2 đề cập đến đối tượng toàn cầu. (trong trình duyệt, ExecutionContext = { 2 đề cập đến Đối tượng Cửa sổ)Trong ngữ cảnh thực thi hàm, giá trị của ExecutionContext = { 2 phụ thuộc vào cách gọi hàm. Nếu nó được gọi bởi một tham chiếu đối tượng, thì giá trị của ExecutionContext = { 2 được đặt cho đối tượng đó, nếu không, giá trị của ExecutionContext = { 2 được đặt cho đối tượng toàn cục hoặc ExecutionContext = { 18 (ở chế độ nghiêm ngặt). Ví dụExecutionContext = { 2Tóm lại, môi trường từ vựng trông như thế này trong mã giả ExecutionContext = { 3Môi trường biếnĐó cũng là một Môi trường từ điển có Bản ghi môi trường chứa các ràng buộc được tạo bởi Biến báo cáo trong ngữ cảnh thực thi này Như đã viết ở trên, môi trường biến cũng là môi trường từ vựng, nên nó có đầy đủ các thuộc tính và thành phần của môi trường từ vựng như đã định nghĩa ở trên Trong ES6, một điểm khác biệt giữa thành phần LexicalEnvironment và thành phần VariableEnvironment là thành phần trước được sử dụng để lưu trữ khai báo hàm và các ràng buộc biến ( ExecutionContext = { 19 và ExecutionContext = { 20), trong khi thành phần sau chỉ được sử dụng để lưu trữ các ràng buộc biến ____121Giai đoạn thực hiệnTrong giai đoạn này, việc gán cho tất cả các biến đó được thực hiện và mã cuối cùng được thực thi Hãy xem xét một số ví dụ để hiểu các khái niệm trên ExecutionContext = { 7Khi đoạn mã trên được thực thi, công cụ JavaScript sẽ tạo bối cảnh thực thi toàn cầu để thực thi mã toàn cầu. Vì vậy, bối cảnh thực thi toàn cầu sẽ giống như thế này trong giai đoạn tạo ExecutionContext = { 8Trong giai đoạn thực thi, việc gán biến được thực hiện. Vì vậy, bối cảnh thực thi toàn cầu sẽ giống như thế này trong giai đoạn thực thi ExecutionContext = { 9Khi gặp lệnh gọi hàm ExecutionContext = { 22, ngữ cảnh thực thi hàm mới được tạo để thực thi mã hàm. Vì vậy, ngữ cảnh thực thi chức năng sẽ giống như thế này trong giai đoạn tạoExecutionContext = { 0Sau đó, bối cảnh thực thi sẽ trải qua giai đoạn thực thi, nghĩa là việc gán cho các biến bên trong hàm được thực hiện. Vì vậy, ngữ cảnh thực thi chức năng sẽ giống như thế này trong giai đoạn thực thi ExecutionContext = { 1Sau khi chức năng hoàn thành, giá trị trả về được lưu trữ bên trong ExecutionContext = { 23. Vì vậy, môi trường từ vựng toàn cầu được cập nhật. Sau đó, mã toàn cầu hoàn thành và chương trình kết thúcLưu ý — Như bạn có thể nhận thấy rằng các biến được xác định ExecutionContext = { 19 và ExecutionContext = { 20 không có bất kỳ giá trị nào được liên kết với chúng trong giai đoạn tạo, nhưng các biến được xác định ExecutionContext = { 26 được đặt thành ExecutionContext = { 18Điều này là do, trong giai đoạn tạo, mã được quét để tìm các khai báo hàm và biến, trong khi toàn bộ khai báo hàm được lưu trữ trong môi trường, các biến ban đầu được đặt thành ExecutionContext = { 18 (trong trường hợp là ExecutionContext = { 26) hoặc vẫn chưa được khởi tạo (trong trường hợp Đây là lý do tại sao bạn có thể truy cập các biến được xác định bởi ExecutionContext = { 26 trước khi chúng được khai báo (mặc dù là ExecutionContext = { 18) nhưng lại gặp lỗi tham chiếu khi truy cập các biến ExecutionContext = { 19 và ExecutionContext = { 20 trước khi chúng được khai báoĐây là, những gì chúng ta gọi cẩu Lưu ý — Trong giai đoạn thực thi, nếu công cụ JavaScript không thể tìm thấy giá trị của biến ExecutionContext = { 19 tại vị trí thực tế mà nó được khai báo trong mã nguồn, thì nó sẽ gán cho biến đó giá trị là ExecutionContext = { 18Phần kết luậnVì vậy, chúng tôi đã thảo luận về cách các chương trình JavaScript được thực thi bên trong. Mặc dù bạn không nhất thiết phải học tất cả các khái niệm này để trở thành một nhà phát triển JavaScript tuyệt vời, nhưng việc hiểu rõ các khái niệm trên sẽ giúp bạn hiểu các khái niệm khác như Hoisting, Scope và Closures dễ dàng và sâu sắc hơn Vậy là xong và nếu bạn thấy bài viết này hữu ích, vui lòng nhấn nút 👏 và bình luận bên dưới. Rất vui được nói chuyện 😃 Được chia sẻ trong blog của Bit Bit giúp dễ dàng chia sẻ các thành phần và mô-đun nhỏ giữa các dự án và ứng dụng để bạn và nhóm của bạn có thể xây dựng nhanh hơn. Chia sẻ các thành phần, phát triển chúng ở mọi nơi và tạo ra một bộ sưu tập tuyệt đẹp. Thử nó JavaScript thực thi ở đâu?Bất cứ khi nào công cụ JavaScript nhận được tệp tập lệnh, trước tiên, công cụ này sẽ tạo Ngữ cảnh thực thi mặc định được gọi là Bối cảnh thực thi toàn cục (GEC) . GEC là Bối cảnh thực thi cơ sở/mặc định nơi tất cả mã JavaScript không nằm trong hàm được thực thi.
JavaScript có chạy trên trình duyệt hoặc máy chủ không?Thông thường JavaScript chỉ chạy ở phía máy khách (trình duyệt) . Nhà phát triển cũng có thể viết mã hướng sự kiện trên JavaScript, mã này có thể thực thi một số chức năng trong sự kiện và có thể chạy trên một số công cụ.
JavaScript chỉ được thực thi trên máy chủ?Vì JavaScript là một phần của trình duyệt nên nó có thể chạy mà không cần có máy chủ web . |