Bối cảnh thực thi javascript la gì ✅ Chi Tiết

Copy

Mẹo Hướng dẫn Bối cảnh thực thi javascript la gì Chi Tiết

Họ tên bố (mẹ) đang tìm kiếm từ khóa Bối cảnh thực thi javascript la gì được Update vào lúc : 2022-12-26 02:15:09 . Với phương châm chia sẻ Mẹo về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi Read tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Admin lý giải và hướng dẫn lại nha.

Oke, một lần nữa, để hiểu mấy cái sau như Scope Chain thì việc hiểu Execution Stack đây rất quan trọng

Nội dung chính Show

Môi trường biếnKết quảBối cảnh thực thi (EC)Các loại toàn cảnh thực thiBối cảnh thực thi được tạo như vậy nàoCUỘC GỌIPhần kết luận

Gọi hàm

Lập trình viên để mát hơn khi thuyết trình hay chém gió cần 'chêm' thấy từ tiếng Anh vô. Ví dụ lập trình hướng đối tượng ta sẽ nói là Ôu ô pi. Lớp ta sẽ đọc là flag lát sì, hàm ta sẽ gọi là phân hóa

Giỡn thui, chứ tại mấy ông pro hay đọc nhiều sách, xem nhiều video nên hay bị ngứa nên lâu lâu chụp tiếng Anh là thông thường

Quay lại vấn đề để gọi hàm ( chạy hàm ) tiếng Anh là ìn vâu kờ ( gọi )

Ủ?

Được rồi, sau khi khai báo hàm, để chạy ta sử dụng 2 dấu ( ) sau tên của hàm đó, ví dụ

hàm a(){ bảng điều khiển. nhật ký ('niviki. com');

a() // gọi hàm

Cái này dễ ẹt, ai biết không?

Sau này còn có mấy niệm nhờ vào cái gọi hàm này nè, đừng có kinh nha, tới lúc đó tại sao không nhắc trước, tỉnh như đống này

Gọi hàm mà còn tồn tại kiểu function()() như vậy ư, thấy cú pháp lạ chưa?

Ngạc nhiên chưa?

Thôi, quay lại bài học kinh nghiệm tay nghề nào. Cho ví dụ sau, thắc mắc Bối cảnh thực thi được tạo ra làm sao

function b() var b function a() b() // gọi hàm

a() // gọi hàm

Khi chạy, trước tiên Bối cảnh thực thi toàn cầu sẽ được tạo trước, tiếp theo là những Bối cảnh thực thi khác được tạo và bỏ vào ngăn xếp được gọi là Ngăn xếp thực thi

Tức là lúc mỗi một hàm thực thi ( hàm gọi ) sẽ có một Bối cảnh thực thi được tạo ra và xếp vào một ngăn xếp

Khi hàm chạy xong, Execution Context chứa hàm đó sẽ được bật ra bên phía ngoài

Môi trường biến

Đoạn mã trên cũng vậy, ta thêm một chút ít

function b() var myVar function a() b() // gọi hàm var myVar = 69

var myVar = 0 a() // gọi hàm

Khi Execution Context được tạo, nó sẽ chứa luôn những biến bên trong nó

Như ví dụ trên, myVar được khởi động 3 lần ở 3 Bối cảnh thực thi rất khác nhau, mỗi nơi có một giá trị rất khác nhau

Khi hàm chạy xong, Execution Context bị bật ra hết khỏi Ngăn xếp thực thi và chỉ từ lại 1 Global Execution Context. Vì thế giá trị của myVar sau khi chạy hàm a() là 0

Hình minh họa

File file

văn bản var="bên phía ngoài"; . nhật ký (văn bản);

Kết quả ra là gì?

Kết quả

Thiệt ra cái này khi lý giải, mọi người cứ hay nói là phạm vi và người nghe vẫn hiểu đại ý là thư thế

Nhưng ý mình yêu thích những bạn làm rõ rõ ràng, cách nó hoạt động và sinh hoạt giải trí bên trong. Có 2 quyền lợi khi hiểu việc làm này là

JavaScript đã trở thành một trong những ngôn từ lập trình biến phổ biến nhất lúc bấy giờ. Nó cũng đứng vị trí số 1 về kho tàng trữ số lượng GitHub và là ngôn từ lập trình được thảo luận nhiều nhất trên StackOverflow

Do đó, điều rất quan trọng là bạn phải hiểu những điều cơ bản và biết điều gì xảy ra đằng sau bất kỳ chương trình JS nào và nó được thực thi ra làm sao, nếu bạn muốn đi sâu vào JS

Bối cảnh thực thi (EC)

Mọi thứ trong JS đều xảy ra bên trong Execution Context. Nó là môi trường tự nhiên thiên nhiên mà mã JS được thực thi. Nó gồm có mức giá trị của 'cái này', những biến, đối tượng và hiệu suất cao mà mã JS có quyền truy cập vào bất kỳ thời điểm rõ ràng nào dưới dạng những cặp key-value. Mỗi code block sẽ có EC riêng mà nó đang thực thi

Hãy nhìn vào phía trên, nó gồm có hai phần

Bộ nhớ (bộ nhớ). Tất cả những biến có trong mã của bạn được tàng trữ ở đây dưới dạng những cặp key-valueMã số. Đây là một luồng nơi mã được thực thi, một dòng tại thuở nào điểm

Các loại toàn cảnh thực thi

nó tạo ra một đối tượng toàn cục (đối tượng toàn cục) là đối tượng hiên chạy cửa số (dành riêng cho những trình duyệt)it set value of this by global object

GEC bị xóa sau khi quá trình thực thi toàn bộ chương trình kết thúc

Bối cảnh thực thi được tạo ra làm sao

JavaScript Engine tạo Execution Context trong 2 quá trình

Giai đoạn sáng tạo. ITrong quá trình này, StackOverflow0 chỉ quét toàn bộ mã nhưng không thực hiện nó. Nó tạo ra StackOverflow1 rồi cấp phép bộ nhớ cho mọi biến (với giá trị của nó là StackOverflow2) và những StackOverflow3 trong phạm vi của nó. Sau đó, nó cũng khởi tạo giá trị của thisGiai đoạn thực hiện. Trong quá trình này, công cụ JS thực hiện quét lại mã để update những biến và hoàn tất quá trình thực thi

Bất kể lúc nào bạn chạy mã JS của tớ, trong StackOverflow5, một StackOverflow6 được tạo ra để tàng trữ tất cả những biến toàn cục có mức giá trị là StackOverflow2 và những hiệu suất cao với phần thân của nó là giá trị. Sau đó, một EC duy nhất được tạo cho những hiệu suất cao khác hoạt động và sinh hoạt giải trí theo cùng một cách

trước tiên nó tàng trữ và cấp phép bộ nhớ cho tất cả những biến cục bộ của hàm đóthực thi mã khối và tự hủy sau khi StackOverflow8 của nó kết thúc

Ví dụ

span class="từ khóa mã thông báo">var/span> a span class="token operator">=/span> span class="token number">10/span>span class="token punctuation">;/span>

span class="từ khóa mã thông báo">function/span> span class="token function">doubleTheNumber/span>span class="token punctuation">(/span>span class="token parameter">number/span>span class="token punctuation">)/span> span class="token punctuation">/span>

span class="token keyword">var/span> doubleNumber span class="token operator">=/span> span class="token number">2/span> span class="token operator">*/span> numberspan class="token punctuation">;/span>

span class="token keyword">return/span> doubleNumberspan class="token punctuation">;/span>

span class="dấu câu mã thông báo">/span>

span class="từ khóa mã thông báo">var/span> result span class="token operator">=/span> span class="token function">doubleTheNumber/span>span class="token punctuation">(/span>aspan class="token punctuation">)/span>span class="token punctuation">;/span>

bảng điều khiểnspan lớp="token punctuation">./span>span class="token function">log/span>span class="token punctuation">(/span>resultspan class="token punctuation">)/span>span class="token punctuation">;/span>

Với đoạn mã trên, khi thực thi nó sẽ chạy như sau

Khi đoạn mã trên được chạy, đầu tiên nó sẽ vào StackOverflow5. Toàn bộ mã được StackOverflow0 quét và StackOverflow6 được tạo

Trong lần quét thứ 2, khi nó đang ở trong StackOverflow8, mỗi mã dòng sẽ được quét từ trên xuống dưới và giá trị của Execution Context3 được update mới thành Execution Context4 – chính bới JavaScript là ngôn từ đồng bộ, đơn luồng nên nó phải quét lại When it scan to line Execution Context5. Nó sẽ vào StackOverflow3 này để quét

Bây giờ, để thực hiện hiệu suất cao này, tiến trình thực thi sẽ tương ứng với tiến trình trên. Một EC sẽ được tạo cho nó. Trong Execution Context8, bộ nhớ sẽ được tạo cho Execution Context9

Trong quá trình thực thi của hàm này, vì giá trị của key-value0 là 10 nên key-value1 sẽ là 2 * 10, tức là 20. Sau đó nó sẽ trả về key-value2

Sau câu lệnh key-value3, key-value4 cho hàm key-value5 sẽ bị hủy/xóa và JS Engine quay trở lại dòng Execution Context5, nơi giá trị của key-value7 sẽ được update thành 20Dòng ở đầu cuối của mã được thực thi – key-value8 – sau đó StackOverflow6 của chương trình này sẽ bị hủy/xóa

Ở ví dụ trên, những bạn hoàn toàn có thể hiểu được làm thế nào để một code block0 được thực thi. Tuy nhiên, trong thực tế, quá trình thực thi của nó sẽ không thẳng thừng như tiến trình từ 1-7 như ở trên. JS Engine sử dụng code block1 để quản lý và thực hiện tiến trình này

CUỘC GỌI

Call Stack duy trì thứ tự thực hiện của code block2. Nó còn được gọi là những tên gọi như code block3, code block4, code block5, v. v

Nó là một ngăn xếp/ngăn xếp gồm có tất cả những EC. GEC luôn là EC đầu tiên được đẩy vào Ngăn xếp này và cũng là EC ở đầu cuối được phổ biến. Bất kể lúc nào EC mới được tạo, nó sẽ được đẩy vào ngăn xếp. Khi quá trình thực thi của nó kết thúc hoặc nó trả về một giá trị nào đó, nó sẽ bật ra bên phía ngoài và công cụ JS chuyển đến bước tiếp theo trong Call Stack

Ví dụ

span class="từ khóa mã thông báo">var/span> a span class="token operator">=/span> span class="token number">10/span>span class="token punctuation">;/span>

span class="token keyword">return/span> doubleNumberspan class="token punctuation">;/span>

span class="dấu câu mã thông báo">/span>

span class="từ khóa mã thông báo">var/span> result span class="token operator">=/span> span class="token function">doubleTheNumber/span>span class="token punctuation">(/span>span class="token number">10/span>span class="token punctuation">)/span>span class="token punctuation">;/span>

Giải thích hoạt động và sinh hoạt giải trí của ngăn xếp cuộc gọi

Khi chạy đoạn mã trên, GEC sẽ được tạo trước và được đưa vào Ngăn xếp. Trong quá trình thực thi, khi JS Engine thực thi hàm key-value5, một EC mới sẽ được tạo riêng cho hàm này và được đưa vào ngăn xếp. Khi quá trình thực thi kết thúc, EC này sẽ được lấy ra và JS Engite trở lại GEC. Sau khi thực hiện xong toàn bộ đoạn mã này, GEC này cũng tiếp tục được lấy ra

Tương tự, bạn cũng hoàn toàn có thể kiểm tra thực tế cách hoạt động và sinh hoạt giải trí của code block7 cho bất kỳ mã JS nhất định nào.
Chạy mã JS của bạn trong trình duyệt -> Mở bảng điều khiển -> Nguồn. You will code block7 as in hình dưới đây.

Tại thời điểm này, code block7 sẽ trống vì mã đã hoàn thành xong việc thực thi. Để xem việc tạo và xóa những EC, hãy thêm những điểm ngắt vào mã của bạn và chạy thôi

Phần kết luận

Phía trên, tất cả chúng ta đã cùng nhau xem cách mà một đoạn mã được thực thi trong JS ra làm sao, cách mà JS quản lý tiến trình thực hiện ra sao. Mong rằng nó hoàn toàn có thể giúp những bạn hiểu thêm về JS và nắm bắt nó rõ hơn

Tải thêm tài liệu liên quan đến nội dung bài viết Bối cảnh thực thi javascript la gì programming javascript

Video Bối cảnh thực thi javascript la gì ?

Bạn vừa tham khảo nội dung bài viết Với Một số hướng dẫn một cách rõ ràng hơn về Review Bối cảnh thực thi javascript la gì tiên tiến nhất

Share Link Tải Bối cảnh thực thi javascript la gì miễn phí

Bạn đang tìm một số trong những Share Link Cập nhật Bối cảnh thực thi javascript la gì miễn phí.

Hỏi đáp thắc mắc về Bối cảnh thực thi javascript la gì

Nếu sau khi đọc nội dung bài viết Bối cảnh thực thi javascript la gì vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Mình lý giải và hướng dẫn lại nha #Bối #cảnh #thực #thi #javascript #gì - 2022-12-26 02:15:09

Kế Toán.VN News - Tổng hợp tình huống kế toán

Table of Content