JS 中的 This 別再被問倒了，面試常見問題分析

GitHub地址：https://github.com/SimonZhang...

this的指向問題應該是讓每個前端er都頭疼的問題，我也同樣，曾經遇到甚至都是一頓亂猜。最近在研讀一些書籍如《你不知道的JavaScript》和《JavaScript語言精粹與編程實踐》，讓我對this的問題豁然開朗。故寫下此篇文章，分享一下個人心得。

隱式綁定

關於this，通常來講，誰調用了方法，該方法的this就指向誰，如：

function foo(){
    console.log(this.a)
}

var a = 3;

var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 輸出2,由於是obj調用的foo，因此foo的this指向了obj，而obj.a = 2

若是存在屢次調用，對象屬性引用鏈只有上一層或者說最後一層在調用位置中起做用，如：

function foo() {
    console.log( this.a )
}

var obj2 = { 
    a: 42,
    foo: foo
}

var obj1 = {
    a: 2,
    obj2: obj2
}

obj1.obj2.foo(); // 42

隱式丟失

一個最多見的this綁定問題就是被隱式綁定的函數會丟失綁定對象，也就是說他迴應用默認綁定，從而把this綁定到全局對象或者undefined上，取決因而否是嚴格模式。

function foo() {
    console.log( this.a )
}

var obj1 = {
    a: 2,
    foo: foo
}

var bar = obj1.foo; // 函數別名！

var a = "oops, global"; // a是全局對象的屬性

bar(); // "oops, global"

雖然bar是obj.foo的一個引用，可是實際上，它引用的是foo函數自己，所以此時的bar()實際上是一個不帶任何修飾的函數調用，所以應用了默認綁定

一個更微妙、更常見而且更出乎意料的狀況發生在傳入回調函數時：

function foo() {
    console.log( this.a )
}

function doFoo( fn ){
    // fn 其實引用的是 foo
    fn(); // <-- 調用位置！
}

var obj = {
    a: 2,
    foo: foo
}

var a = "oops, global"; // a是全局對象的屬性

doFoo( obj.foo ); // "oops, global"

參數傳遞其實就是一種隱式賦值，所以咱們傳入函數時也會被隱式賦值，因此結果和上一個例子同樣，若是把函數傳入語言內置的函數而不是傳入本身聲明的函數（如setTimeout等），結果也是同樣的

顯式綁定

簡單的說，就是指定this，如：call、apply、bind、new綁定等

硬綁定

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
}

var bar = function() {
    return foo.apply( obj, arguments)
}

var b = bar(3); // 2 3
console.log(b); // 5

這裏簡單作一下解釋：
在bar函數中，foo使用apply函數綁定了obj，也就是說foo中的this將指向obj，與此同時，使用arguments（不限制傳入參數的數量）做爲參數傳入foo函數中；因此在運行bar(3)的時候，首先輸出obj.a也就是2和傳入的3，而後foo返回了二者的相加值，因此b的值爲5

一樣，本例也可使用bind:

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
}

var bar = foo.bind(obj)

var b = bar(3); // 2 3
console.log(b); // 5

new綁定

在傳統面向類的語言中，使用new初始化類的時候會調用類中的構造函數，可是JS中new的機制實際上和麪向類和語言徹底不一樣。

使用new來調用函數，或者說發生構造函數調用時，會自動執行下面的操做：

• 建立（或者說構造）一個全新的對象

• 這個新對象會被執行[[Prototype]]鏈接

• 這個新對象會綁定到函數調用的this

• 若是函數沒有返回其餘對象，那麼new表達式中的函數會自動返回這個新對象
  如：

function foo(a){
    this.a = a
}

var bar = new foo(2);
console.log(bar.a); // 2

使用new來調用foo(...)時，咱們會構造一個新對象並把它綁定到foo(...)調用中的this上。new是最後一種能夠影響函數調用時this綁定行爲的方法，咱們稱之爲new綁定。

this的優先級

毫無疑問，默認綁定的優先級是四條規則中最低的，因此咱們能夠先不考慮它。

隱式綁定和顯式綁定哪一個優先級更高？咱們來測試一下：

function foo(a){
    console.log(this.a)
}

var obj1 = {
    a: 2,
    foo: foo
}

var obj2 = {
    a: 3,
    foo: foo
}

obj1.foo(); // 2
obj2.foo(); // 3

obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2

能夠看到，顯式綁定優先級更高，也就是說在判斷時應當先考慮是否能夠存在顯式綁定。

如今咱們要搞清楚new綁定和隱式綁定的優先級誰高誰低 ：

function foo(a){
    this.a = something
}

var obj1 = {
    foo: foo
}

var obj2 = {}

obj1.foo(2); 
console.log(obj1.a); // 2

obj1.foo.call(obj2,3);
console.log(obj2.a); // 3

var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

能夠看到new綁定比隱式綁定優先級高。可是new綁定和顯式綁定誰的優先級更高呢？

function foo(something){
    this.a = something
}

var obj1 = {}

var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2

var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

能夠看到，new綁定修改了硬綁定中的this，因此new綁定的優先級比顯式綁定更高。

之因此要在new中使用硬綁定函數，主要目的是預先設置函數的一些參數，這樣在使用new進行初始化時就能夠只傳入其他的參數。bind(...)的功能之一就是能夠把除了第一個參數（第一個參數用於綁定this）以外的其餘參數都傳給下層的函數（這種技術稱爲「部分應用」，是「柯里化」的一種）。舉例來講：

function foo(p1,p2){
    this.val = p1 + p2;
}

// 之因此使用null是由於在本例中咱們並不關心硬綁定的this是什麼
// 反正使用new時this會被修改
var bar = foo.bind(null,'p1');

var baz = new bar('p2');

baz.val; // p1p2
}

柯里化:在直覺上，柯里化聲稱「若是你固定某些參數，你將獲得接受餘下參數的一個函數」。因此對於有兩個變量的函數yx，若是固定了 y = 2，則獲得有一個變量的函數 2x

This在箭頭函數中的應用

箭頭函數不使用this的四種標準規則，而是根據外層（函數或者全局）做用域來決定this。

咱們來看一下箭頭函數的詞法做用域：

function foo() {
    // 返回一個箭頭函數
    return (a) => {
        // this繼承自foo()
        console.log(this.a)
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
};

var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3！

foo()內部建立的箭頭函數會捕獲調用時foo()的this。因爲foo()的this綁定到obj1，bar（引用箭頭函數）的this也會綁定到obj1，箭頭函數的綁定沒法被修改。（new也不行!）

總結

若是要判斷一個運行中的函數的this綁定，就須要找到這個函數的直接調用位置。找到以後就能夠順序應用下面這四條規則來判斷this的綁定對象。

1. 由new調用？綁定到新建立的對象。

2. 由call或者apply（或者bind）調用？綁定到指定的對象。

3. 由上下文對象調用？綁定到那個上下文對象。

4. 默認：在嚴格模式下綁定到undefined，不然綁定到全局對象。