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

SimonZhang發表於2017-04-24
JS面試

GitHub地址：github.com/SimonZhangI…

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(something){
    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，否則繫結到全域性物件。

相關文章