本文轉載自【微信公眾號：前端人，ID:FrontendPeople】經(jīng)微信公眾號授權轉載，如需轉載與原文作者聯(lián)系

前言

本篇文章比較適合 3 年以上的前端工作者，JS 三座大山分別指：原型與原型鏈，作用域及閉包，異步和單線程。

原型與原型鏈

說到原型，就不得不提一下構造函數(shù)，首先我們看下面一個簡單的例子：

function Dog(name,age){ this.name = name; this.age = age;}let dog1 = new Dog("哈士奇",3);let dog2 = new Dog("泰迪",2);

首先創(chuàng)造空的對象，再讓 this 指向這個對象，通過 this.name 進行賦值，最終返回 this，這其實也是 new 一個對象的過程。

其實：

let obj = {} 是 let obj = new Object() 的語法糖；let arr = [] 是 let arr = new Array() 的語法糖；function Dog(){...} 是 let Dog = new Fucntion() 的語法糖。那什么是原型那？在 js 中，所有對象都是 Object 的實例，并繼承 Object.prototype 的屬性和方法，但是有一些是隱性的。

我們來看一下原型的規(guī)則：

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

var obj = {};obj.attribute = "三座大山";var arr = [];arr.attribute = "三座大山";function fn1 () {}fn1.attribute = "三座大山";

所有的引用類型（包括數(shù)組，對象，函數(shù)）都有隱性原型屬性（proto）, 值也是一個普通的對象。

console.log(obj.__proto__);

所有的函數(shù)，都有一個 prototype 屬性，值也是一個普通的對象。

console.log(obj.prototype);

所有的引用類型的proto屬性值都指向構造函數(shù)的 prototype 屬性值。

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

當試圖獲取對象屬性時，如果對象本身沒有這個屬性，那就會去他的proto（prototype）中去尋找。

function Dog(name){this.name = name;}Dog.prototype.callName = function (){ console.log(this.name,"wang wang");}let dog1 = new Dog("Three Mountain");dog1.printName = function (){ console.log(this.name);}dog1.callName(); // Three Mountain wang wangdog1.printName(); // Three Mountain

原型鏈：如下圖。

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

作用域及閉包

講到作用域，你會想到什么？當然是執(zhí)行上下文。每個函數(shù)都有自己的 excution context，和 variable object。這些環(huán)境用于儲存上下文中的變量，函數(shù)聲明，參數(shù)等。只有函數(shù)才能制造作用域。

PS：for if else 不能創(chuàng)造作用域。

console.log(a) ; // undefinedvar a = 1;//可理解為var a;console.log(a); // undefineda = 1;

執(zhí)行 console.log 時，a 只是被聲明出來，并沒有賦值；所以結果當然是 undefined。

this

本質上來說，在 js 里 this 是一個指向函數(shù)執(zhí)行環(huán)境的指針。this 永遠指向最后調用它的對象，并且在執(zhí)行時才能獲取值，定義是無法確認他的值。

var a = {name : "A", fn : function （）{ console.log (this.name) }}a.fn() // this === aa 調用了fn() 所以此時this為aa.fn.call ({name : "B"}) // this === {name : "B"}

使用call(),將this的值指定為{name:"B"}

var fn1 = a.fnfn1() // this === window

雖然指定fn1 = a.fn，但是調用是有window調用，所以this 為window this 有多種使用場景，下面我會主要介紹 4 個使用場景：

作為構造函數(shù)執(zhí)行

function Student(name,age) {this.name = name // this === s this.age = age // this === s //return this}var s = new Student("py1988",30)

首先 new 字段會創(chuàng)建一個空的對象，然后調用 apply() 函數(shù)，將 this 指向這個空對象。這樣的話，函數(shù)內部的 this 就會被空對象代替。

作為普通函數(shù)執(zhí)行

function fn () {console.log (this) // this === window}fn ()

作為對象屬性執(zhí)行

var obj = {name : "A", printName : function () { console.log (this.name) // this === obj }}obj.printName ()

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

三個函數(shù)可以修改 this 的指向，具體請往下看：

var name = "小明";var age = "17";var obj = {name : "安妮", objAge : this.age, fun : function () { console.log ( this.name + "今年" + this.age ) }}console.log(obj.objAge) // 17obj.fun() // 安妮今年undefinedvar name = "小明"; var age = "17";var obj = { name : "安妮", objAge ：this.age, fun : function (like,dislike) { console.log (this.name + "今年" + this.age ，"喜歡吃" + like + "不喜歡吃" + dislike) }}var a = { name : "Jay", age : 23 }obj.fun.call(a,"蘋果","香蕉");// Jay今年23 喜歡吃蘋果不喜歡吃香蕉obj.fun.apply(a,["蘋果","香蕉"]); // Jay今年23 喜歡吃蘋果不喜歡吃香蕉obj.fun.bind(a,"蘋果","香蕉")(); // Jay今年23 喜歡吃蘋果不喜歡吃香蕉

首先 call，apply，bind 第一個參數(shù)都是 this 指向的對象

call 和 apply 如果第一個參數(shù)指向 null 或 undefined 時，那么 this 會指向 windows 對象。

call，apply，bind 的執(zhí)行方式如上例所示。

call，apply 都是改變上下文中的 this，并且是立即執(zhí)行的。

bind 方法可以讓對應的函數(shù)想什么時候調用就什么時候調用。

閉包

閉包的概念很抽象，看下面的例子你就會理解什么叫閉包了：

function a(){var n = 0; this.fun = function () { n++; console.log(n); };}var c = new a();c.fun(); //1c.fun(); //2

閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)。在 js 中只有函數(shù)內部的子函數(shù)才能讀取局部變量。所以可以簡單的理解為：定義在內部函數(shù)的函數(shù)。

用途主要有兩個：

1）前面提到的，讀取函數(shù)內部的變量。2）讓變量值始終保持在內存中。異步和單線程

我們先感受下異步。

console.log("start");setTimeout(function () {console.log("medium");}, 1000);console.log("end");

使用異步后，打印的順序為

start-> end->medium

因為沒有阻塞。

為什么會產生異步呢？

首先因為 js 為單線程，也就是說 CPU 同一時間只能處理一個事務。得按順序，一個一個處理。

如上例所示，

第一步：執(zhí)行第一行打印 “start”；第二步：執(zhí)行 setTimeout，將其中的函數(shù)分存起來，等待時間結束后執(zhí)行；第三步：執(zhí)行最后一行，打印 “end”；第四步：處于空閑狀態(tài)，查看暫存中，是否有可執(zhí)行的函數(shù)；第五步：執(zhí)行分存函數(shù)。為什么 js 引擎是單線程？

js 的主要用途是與用戶互動，以及操作 DOM，這決定它只能是單線程。例：一個線程要添加 DOM 節(jié)點，一個線程要刪減 DOM 節(jié)點，容易造成分歧。

為了更好使用多 CPU，H5 提供了 web Worker 標準，允許 js 創(chuàng)建多線程，但是子線程受到主線程控制，而且不得操作 DOM。

任務列隊

單線程就意味著，所有的任務都要排隊，前一個結束，才會執(zhí)行后面的任務。如果列隊是因為計算量大，CPU 忙不過來，倒也算了。但是更多的時候，CPU 是閑置的，因為 IO 設備處理得很慢，例如 ajax 讀取網(wǎng)絡數(shù)據(jù)。

js 設計者便想到，主線程完全可以不管 IO 設備，將其掛起，然后執(zhí)行后面的任務。等后面的任務結束掉，在反過頭來處理掛起的任務。

好，我們來梳理一下：

1）所有的同步任務都在主線程上執(zhí)行，行程一個執(zhí)行棧。2）除了主線程之外，還存在一個任務列隊，只要一步任務有了運行結果，就在任務列隊中植入一個時間。3）主線程完成所有任務，就會讀取列隊任務，并將其執(zhí)行。4）重復上面三步。只要主線程空了，就會讀取任務列隊，這就是 js 的運行機制，也被稱為 event loop（事件循環(huán)）。