1. 程式人生 > >你知道JS的“三座大山”嗎?帶你初識前端JavaScript經典內容

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

作用域及閉包

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

this

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

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

1. 作為建構函式執行

首先 new 欄位會建立一個空的物件,然後呼叫 apply() 函式,將 this 指向這個空物件。這樣的話,函式內部的 this 就會被空物件代替。

2. 作為普通函式執行

3. 作為物件屬性執行

4.call(),apply(),bind()

三個函式可以修改 this 的指向,具體請往下看:

 

首先 call,apply,bind 第一個引數都是 this 指向的物件,call 和 apply 如果第一個引數指向 null 或 undefined 時,那麼 this 會指向 windows 物件。

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

閉包

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

閉包就是能夠讀取其他函式內部變數的函式。在 js 中只有函式內部的子函式才能讀取區域性變數。所以可以簡單的理解為:定義在內部函式的函式。

原型與原型鏈

什麼是原型那?在 js 中,所有物件都是 Object 的例項,並繼承 Object.prototype 的屬性和方法,但是有一些是隱性的。

我們來看一下原型的規則:

1. 所有的引用型別(包括陣列,物件,函式)都具有物件特性;可自由擴充套件屬性。

2. 所有的引用型別(包括陣列,物件,函式)都有隱性原型屬性(proto), 值也是一個普通的物件。

console.log(obj.__proto__);

3. 所有的函式,都有一個 prototype 屬性,值也是一個普通的物件。

console.log(obj.prototype);

4. 所有的引用型別的proto屬性值都指向建構函式的 prototype 屬性值。

console.log(obj.__proto__ === Object.prototype); // true

5. 當試圖獲取物件屬性時,如果物件本身沒有這個屬性,那就會去他的proto(prototype)中去尋找。

原型鏈:如下圖。

在找一個屬性,首先會在 f.proto中去找,因為屬性值為一個物件,那麼就會去 f.proto.proto去找,同理如果還沒找到,就會一直向上去查詢,直到結果為 null 為止。這個串起來的鏈即為原型鏈。

非同步和單執行緒

我們先感受下非同步。

console.log("start");

setTimeout(function () {

console.log("medium");

}, 1000);

console.log("end");

使用非同步後,列印的順序為 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(事件迴圈)。