徹底理解JavaScript中的this

WaterMan發表於2018-12-03
JavaScript

JavaScript中的This詳解

隱式繫結

關於this,一般來說，誰呼叫了方法，該方法的this就指向誰，例如：

function foo() {
    console.log(this);
    console.log(this.a);
}
var a = 3;
var obj = {
    a:2,
    foo:foo
};
foo();//輸出window,3
obj.foo();//輸出obj,2
複製程式碼

foo()輸出為window,3,因為是window呼叫了foo函式；而obj.foo()輸出為obj,2，因為obj呼叫的foo,所以foo的指標this就指向了obj。

如果存在多次呼叫，物件屬性引用鏈只有一層或者說最後一層在呼叫位置中起作用，例如：

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 obj = {
    a:2,
    foo:foo
}
var a = 3;//a是全域性物件的屬性
var bar = obj.foo;//函式別名
bar();//3
複製程式碼

雖然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 = 3;//a是全域性物件的屬性
doFoo(obj.foo);//3
複製程式碼

引數傳遞其實就是一種隱式賦值，因此我們傳入函式時也會被隱式賦值。

顯式繫結

簡單的說，就是指定this,如：call、apply、bind、和new繫結等

硬繫結

function foo(b){
    console.log(this.a,b);
    return this.a+b;
}
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將指向ojb,以此同時，使用arguments(不限制傳入引數的數量)作為引數傳入到foo函式中；所以在執行bar(3)的時候，首先輸出obj.a也就是2和傳入的3，然後foo返回了兩者的相加值，所以b的值為5。 同樣，本例也可以使用bind:

function foo(b){
    console.log(this.a,b);
    return this.a+b;
}
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 = a;
}
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(a){
    this.a = a;
}
var obj1 = {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a);//2

bar baz = new bar(3);
console.log(obj1.a);//2
console.log(baz.z);//3
複製程式碼

可以看出new繫結修改了顯示繫結中的this，所以new繫結的優先順序比顯示繫結更高。 之所以要在new中使用硬繫結函式，主要目的是預先設定函式的一些引數，這樣在使用new進行初始化時就可以只傳入其餘的引數。bind()的功能之一就是可以把除了第一個引數（第一個引數用於繫結this)之外的其他引數都傳給下層的函式（這種技術稱為“部分應用”，是“柯里化”的一種）。例如：

function foo(p1,p2){
    this.val = p1 + p2;
}
var bar = foo.bind(this,1);
var baz = new bar(2);
console.log(baz.val);//3
複製程式碼

柯里化:在直覺上，柯里化聲稱“如果你固定某些引數，你將得到接受餘下引數的一個函式”。所以對於有兩個變數的函式yx，如果固定了 y = 2，則得到有一個變數的函式 2x

This在箭頭函式中的應用

箭頭函式不適用this的四種標準規則，而是根據外層（函式或則全域性）作用域來決定this。

function foo()｛
    return (a) => {
        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，否則繫結到全域性物件。

相關文章