說道JavaScript，就不得不提一下它的三座大山——閉包、原型和異步

作用域及閉包

講到作用域，你會想到什麼？當然是執行上下文。每個函數都有自己的 excution context，和 variable object。這些環境用於儲存上下文中的變量，函數聲明，參數等。只有函數才能製造作用域。

PS：for 、if...else 不能創造作用域。

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 中只有函數內部的子函數才能讀取局部變量。所以可以簡單的理解為：定義在內部函數的函數。

原型與原型鏈

什麼是原型那？

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

1. 所有的引用類型（包括數組，對象，函數）都具有對象特性；可自由擴展屬性。

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（事件循環）。

編程是一種修行，我願與志同道合的朋友攜手前行，一起探索有關編程的奧妙！

如果您在前端學習的過程中遇到難題，歡迎【關注】並【私信】我，大家一起交流解決！

推薦文章：

閱讀更多 山大王做前端 的文章

關鍵字: Medium JavaScript 三座大山