完全理解JavaScript中的this

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，不然綁定到全局對象。