前端面試送命題-JS三座大山

　前言

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

　原型與原型鏈

　　說到原型，就不得不提一下建構函式，首先我們看下面一個簡單的例子：

function Dog(name,age){   
    this.name = name;
    this.age = age;
}

let dog1 = new Dog("哈士奇",3);
let dog2 = new Dog("泰迪",2);

　　首先創造空的物件，再讓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的屬性和方法，但是有一些是隱性的。

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

　　1.所有的引用型別（包括陣列，物件，函式）都具有物件特性；可自由擴充套件屬性。

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

　　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）中去尋找。

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 wang
dog1.printName(); // Three Mountain

　　原型鏈：如下圖。

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

　作用域及閉包

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

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

console.log(a) ; // undefined
var a = 1;

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

　　執行console.log時，a只是被宣告出來，並沒有賦值；所以結果當然是undefined。

　　this

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

var a = { 
    name : "A", 
    fn : function （）{
        console.log (this.name) 
    } 
} 
a.fn() // this === a 
a 呼叫了fn() 所以此時this為a

a.fn.call ({name : "B"}) // this === {name : "B"} 
使用call(),將this的值指定為{name:"B"}

var fn1 = a.fn 
fn1() // this === window
雖然指定fn1 = a.fn，但是呼叫是有window呼叫，所以this 為window

　　this有多種使用場景，下面我會主要介紹4個使用場景：

　　1.作為建構函式執行

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

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

　　2.作為普通函式執行

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

　　3.作為物件屬性執行

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

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

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

var name = "小明" , age = "17"
var obj = { 
    name : "安妮", 
    objAge : this.age, 
    fun : function () { 
            console.log ( this.name + "今年" + this.age ) 
        } 
} 
console.log(obj.objAge) // 17 
obj.fun() // 安妮今年undefined

var name = "小明" , 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第一個引數都是this指向的物件，call和apply如果第一個引數指向null或undefined時，那麼this會指向windows物件。

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

　　閉包

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

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

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

　　用途主要有兩個：

　　1）前面提到的，讀取函式內部的變數。

　　2）讓變數值始終保持在記憶體中。

　非同步和單執行緒

　　我們先感受下非同步。

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（事件迴圈）。