摘要:引擎的運行原理引擎也是程序,是屬于瀏覽器的一部分,由瀏覽器廠商自行開發。為了提高運行速度,現代瀏覽器一般采用即時編譯即字節碼只在運行時編譯,用到哪一行就編譯哪一行,并且把編譯結果緩存這樣整個程序的運行速度能得到顯著提升。
相信大家在面試的過程中經常遇到查看執行順序的問題,如setTimeout,promise,async await等等,各種組合,是不是感覺頭都要暈掉了,其實這些問題最終還是考察大家對js的運行機制是否掌握牢固,對promise,async的原理是否掌握,萬變不離其宗,這次就來徹底搞懂它。1 js引擎的運行原理
js引擎也是程序,是屬于瀏覽器的一部分,由瀏覽器廠商自行開發。從頭到尾負責整個JavaScript程序的編譯及執行過程
瀏覽器在渲染的過程中,首先按順序加載由首先,進入全局環境,就會先進行預處理,然創建全局上下文執行環境(Global ExecutionContext),會對var聲明的變量和函數聲明進行預處理,window對象就是全局執行上下文的變量對象,所有的變量和函數都是window對象的屬性方法。所以函數聲明提前和變量聲明提升是在創建變量對象中進行的,且函數聲明優先級高于變量聲明。然后推入stack棧中。預處完成之后,開始執行js
當執行bar()時,就會進入bar函數運行環境,就會先進行預處理,創建bar函數執行上下文(bar Execution Context),推入stack棧中,預處理完后,開始執行foo()
在bar函數內部調用foo函數,則再進入foo函數運行環境,創建foo函數執行上下文(foo Execution Context),推入stack棧中
此刻棧底是全局執行上下文(Global Execution Context),棧頂是foo函數執行上下文(foo Execution Context),如上圖,由于foo函數內部沒有再調用其他函數,那么則開始出棧
foo函數執行完畢后,棧頂foo函數執行上下文(foo Execution Context)首先出棧
bar函數執行完畢,bar函數執行上下文(bar Execution Context)出棧
Global Execution Context則在瀏覽器或者該標簽頁關閉時出棧。
1.2.3 執行上下文分析一段簡單的代碼,幫助我們理解創建執行上下文的過程,如下:
function fun(a, b) { var num = 1; function test() { console.log(num) } } fun(2, 3)這里我們在全局環境調用fun函數,創建fun執行上下文,這里為了方便大家理解,暫時不講解作用域鏈以及this指向,如下:
funEC = { //變量對象 VO: { //arguments對象 arguments: { a: undefined, b: undefined, length: 2 }, //test函數 test:, //num變量 num: undefined }, //作用域鏈 scopeChain:[], //this指向 this: window } funEC表示fun函數的執行上下文(fun Execution Context簡寫為funEC)
funE的變量對象中arguments屬性,上面的寫法僅為了方便大家理解,但是在瀏覽器中展示是以類數組的方式展示的
表示test函數在堆內存地址的引用 注:創建變量對象發生在預編譯階段,但尚未進入執行階段,該變量對象都是不能訪問的,因為此時的變量對象中的變量屬性尚未賦值,值仍為undefined,只有進入執行階段,變量對象中的變量屬性進行賦值后,變量對象(Variable
Object)轉為活動對象(Active Object)后,才能進行訪問,這個過程就是VO –> AO過程。建立作用域鏈
作用域鏈由當前執行環境的變量對象(未進入執行階段前)與上層環境的一系列活動對象組成,它保證了當前執行環境對符合訪問權限的變量和函數的有序訪問。理清作用域鏈可以幫助我們理解js很多問題包括閉包問題等,下面我們結合一個簡單的例子來理解作用域鏈,如下:
var num = 30; function test() { var a = 10; function innerTest() { var b = 20; return a + b } innerTest() } test()在上面的例子中,當執行到調用innerTest函數,進入innerTest函數環境。全局執行上下文和test函數執行上下文已進入執行階段,innerTest函數執行上下文在預編譯階段創建變量對象,所以他們的活動對象和變量對象分別是AO(global),AO(test)和VO(innerTest),而innerTest的作用域鏈由當前執行環境的變量對象(未進入執行階段前)與上層環境的一系列活動對象組成,如下:
innerTestEC = { //變量對象 VO: {b: undefined}, //作用域鏈 scopeChain: [VO(innerTest), AO(test), AO(global)], //this指向 this: window }在這里我們順便思考一下,什么是閉包?
我們先看下面一個簡單例子,如下:function foo() { var num = 20; function bar() { var result = num + 20; return result } bar() } foo()我這里直接以瀏覽器解析,以瀏覽器理解的閉包為準來分析閉包,如下圖:
如上圖所示,chrome瀏覽器理解閉包是foo,那么按瀏覽器的標準是如何定義閉包的,我總結為三點:
在函數內部定義新函數
新函數訪問外層函數的局部變量,即訪問外層函數環境的活動對象屬性
新函數執行,創建新的函數執行上下文,外層函數即為閉包
確定this指向
在全局環境下,全局執行上下文中變量對象的this屬性指向為window;函數環境下的this指向卻較為靈活,需根據執行環境和執行方法確定
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100101.html
摘要:的執行機制就是一個主線程一個任務隊列。同步任務就是放在主線程上執行的任務,異步任務就是放在任務隊列的任務。和上述運行的機制主要說明的是,而的出現及普及,又有了新的概念,,它的出現,進一步,中分為兩種任務類型和,在中,稱為,可稱為。 上一篇文章主要整理了一下js引擎是如何工作的,這篇文章主要整理js的事件循環Event loop,以及異步編程的原理 事件循環Event loop 之前文章...
摘要:的執行機制就是一個主線程一個任務隊列。同步任務就是放在主線程上執行的任務,異步任務就是放在任務隊列的任務。和上述運行的機制主要說明的是,而的出現及普及,又有了新的概念,,它的出現,進一步,中分為兩種任務類型和,在中,稱為,可稱為。 上一篇文章主要整理了一下js引擎是如何工作的,這篇文章主要整理js的事件循環Event loop,以及異步編程的原理 事件循環Event loop 之前文章...
摘要:引擎的運行原理引擎也是程序,是屬于瀏覽器的一部分,由瀏覽器廠商自行開發。為了提高運行速度,現代瀏覽器一般采用即時編譯即字節碼只在運行時編譯,用到哪一行就編譯哪一行,并且把編譯結果緩存這樣整個程序的運行速度能得到顯著提升。 相信大家在面試的過程中經常遇到查看執行順序的問題,如setTimeout,promise,async await等等,各種組合,是不是感覺頭都要暈掉了,其實這些問題最...
摘要:當主線程開始執行異步任務,實際就是執行對應的回調函數。異步任務必須指定回調函數。所以注意的是,只是將事件插入了任務隊列,必須等到當前代碼執行棧執行完,主線程才會去執行它指定的回調函數。 最近本人對于js的運行機制,特別是異步,還有回調函數感覺很亂,于是參考了很多有用的博客(博客原文地址會在文末給出),整理如下: js單線程 我們都知道,Javascript語言的執行環境是單線程(si...
摘要:回調函數,一般在同步情境下是最后執行的,而在異步情境下有可能不執行,因為事件沒有被觸發或者條件不滿足。同步方式請求異步同步請求當請求開始發送時,瀏覽器事件線程通知主線程,讓線程發送數據請求,主線程收到 一直以來都知道JavaScript是一門單線程語言,在筆試過程中不斷的遇到一些輸出結果的問題,考量的是對異步編程掌握情況。一般被問到異步的時候腦子里第一反應就是Ajax,setTimse...
閱讀 1675·2021-11-15 11:37
閱讀 3408·2021-09-28 09:44
閱讀 1649·2021-09-07 10:15
閱讀 2784·2021-09-03 10:39
閱讀 2687·2019-08-29 13:20
閱讀 1291·2019-08-29 12:51
閱讀 2204·2019-08-26 13:44
閱讀 2125·2019-08-23 18:02