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

SimonZhang發表於2017-04-24

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,否則繫結到全域性物件。

相關文章