你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容

前端築夢師發表於2018-09-30

作用域及閉包 講到作用域,你會想到什麼?當然是執行上下文。每個函式都有自己的 excution context,和 variable object。這些環境用於儲存上下文中的變數,函式宣告,引數等。

this 本質上來說,在 js 裡 this 是一個指向函式執行環境的指標。this 永遠指向最後呼叫它的物件,並且在執行時才能獲取值,定義是無法確認他的值。

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容

1.1 this 有多種使用場景,下面主要介紹 4 個使用場景:

  1. 作為建構函式執行

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容
作為物件屬性執行

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容
.call(),apply(),bind() 三個函式可以修改 this 的指向,具體請往下看:

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容
首先 call,apply,bind 第一個引數都是 this 指向的物件,call 和 apply 如果第一個引數指向 null 或 undefined 時,那麼 this 會指向 windows 物件。

call,apply,bind 的執行方式如上例所示。call,apply 都是改變上下文中的 this,並且是立即執行的。bind 方法可以讓對應的函式想什麼時候呼叫就什麼時候呼叫。

閉包 閉包的概念很抽象,看下面的例子你就會理解什麼叫閉包了:

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容
閉包就是能夠讀取其他函式內部變數的函式。在 js 中只有函式內部的子函式才能讀取區域性變數。所以可以簡單的理解為:定義在內部函式的函式。

非同步和單執行緒

我們先感受下非同步。

你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容
使用非同步後,列印的順序為 start-> end->medium。因為沒有阻塞。

為什麼會產生非同步呢?

首先因為 js 為單執行緒,也就是說 CPU 同一時間只能處理一個事務。得按順序,一個一個處理。

如上例所示,第一步:執行第一行列印 “start”;第二步:執行 setTimeout,將其中的函式分存起來,等待時間結束後執行;第三步:執行最後一行,列印 “end”;第四部:處於空閒狀態,檢視暫存中,是否有可執行的函式;第五步:執行分存函式。

為什麼 js 引擎是單執行緒?

js 的主要用途是與使用者互動,以及操作 DOM,這決定它只能是單執行緒。例:一個執行緒要新增 DOM 節點,一個執行緒要刪減 DOM 節點,容易造成分歧。

為了更好使用多 CPU,H5 提供了 web Worker 標準,允許 js 建立多執行緒,但是子執行緒受到主執行緒控制,而且不得操作 DOM。

任務列隊

單執行緒就意味著,所有的任務都要排隊,前一個結束,才會執行後面的任務。如果列隊是因為計算量大,CPU 忙不過來,倒也算了。但是更多的時候,CPU 是閒置的,因為 IO 裝置處理得很慢,例如 ajax 讀取網路資料。js 設計者便想到,主執行緒完全可以不管 IO 裝置,將其掛起,然後執行後面的任務。等後面的任務結束掉,在反過頭來處理掛起的任務。

好,我們來梳理一下:

1)所有的同步任務都在主執行緒上執行,行程一個執行棧。

2)除了主執行緒之外,還存在一個任務列隊,只要一步任務有了執行結果,就在任務列隊中植入一個時間。

3)主執行緒完成所有任務,就會讀取列隊任務,並將其執行。

4)重複上面三步。

只要主執行緒空了,就會讀取任務列隊,這就是 js 的執行機制,也被稱為 event loop(事件迴圈)。

有任何疑惑加群QQ786276452

對前端的技術,架構技術感興趣的同學關注我的頭條號,並在後臺私信傳送關鍵字:“前端”即可獲取免費的架構師學習資料

知識體系已整理好(原始碼,筆記,PPT,學習視訊),歡迎免費領取。還有面試視訊分享可以免費獲取。關注我,可以獲得沒有的架構經驗哦!!

相關文章