this是在執行時繫結的。函式呼叫方式的不同就可能使this所繫結的物件不同

一.幾種繫結規則

Ⅰ.預設繫結

• 一般情況下，若無其他規則出現則預設將this繫結到全域性物件上

function foo(){
    var a = 3;
    console.log(a);
}
var a = 2;
foo();      //2

//foo()在呼叫時使用不帶任何修飾的函式引用，只能使用預設繫結

• this常有的集中錯誤理解之一就是認為this指向當前函式的詞法作用域

• this與詞法作用域及作用域物件是完全不同的東西

Ⅱ.隱式繫結

• 若在呼叫位置有上下文物件（可理解為此函式呼叫時使用一個物件.出來的），就遵循隱式繫結

function foo(){
    console.log(a);
}
var obj = {a:2, foo:foo};
var a = "opps,global";  //全域性物件的屬性
obj.foo();              //2     隱式繫結
var bar = obj.foo;      //這裡進行了一次引用賦值
bar();                  //opps,global

如果細心的話你會發現，上邊的程式碼出現了一個問題：隱式丟失

• 當進行隱式繫結時，如果進行一次引用賦值或者傳參操作，會造成this的丟失，使this繫結到全域性物件中去。

由於第7行處進行了以此引用賦值，所以造成了bar()不具有上下文物件，故系統會自動採取預設繫結規則

我們再來舉一個傳參操作造成隱式丟失的例子

function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();               //在此呼叫時引數傳遞為隱式賦值，丟失this繫結
}
var obj = {a:2, foo:foo};
var a = "opps,global";
doFoo(obj.foo);         //看似為隱式繫結，但輸出的是opps,global  

所以我們需要記住：函式傳遞就是一種隱式賦值，而隱式賦值會造成隱式丟失

同樣，js中的一些內建函式在接受一個函式作為引數時恩惠發生以上情況

function setTimeout(fn, delay){
    //等待delay毫秒數
    fn();
}

Ⅲ.顯式繫結

使用apply和call為要執行的函式直接繫結this稱為顯式繫結

function foo(){
    console.log(this.a);
}
var obj = {a:2};
foo.call(obj);      //2

• PS:
  
  • 若給call/apply傳入的是一個基本型別資料，則這個基本型別資料將被轉換成對應的基本包裝型別
  • 此種方法仍然無法解決繫結丟失問題

1.硬繫結

function foo(){
    console.log(this.a);
}
var obj = {a:2};
var bar = function(){       //建立一個包裹函式以確保obj的繫結
    foo.call(obj);
};
bar();                      //2
setTimeout(bar, 1000);      //時隔一秒列印2
bar.call(window);           //2

通過此方法（包裹函式）可以確保obj的繫結，不過韓式不能為函式傳參

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

function bind(fn, obj){     //輔助繫結函式
    return function(){
        return fn.apply(obj, arguments);
    };
}

var obj = {a:2};
var bar = bind(foo, obj);
var b = bar(3);
console.log(b);

//2 3
//5

• ES5中內建了bind方法（其實就是個語法糖）。其返回一個硬編碼的新函式，將你制定的物件繫結到呼叫它的函式的this上

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

function bind(fn, obj){     //輔助繫結函式
    return function(){
        return fn.apply(obj, arguments);
    };
}

var obj = {a:2};
var bar = foo.bind(obj);    //bind返回一個繫結到obj上的新函式
var b = bar(3);
console.log(b);
var a = "window's a";
foo("!");               //對原來的函式不產生影響


//2 3
//15 5
//window's a !
//"window's a!"

6.API呼叫引數指定this

function foo(e1){
    console.log(e1, this.id);
}
var obj = {id:"Sir"};
[1,2,3].forEach(foo, obj);      //forEach第二個引數用來設定this


//1 "Sir"
//2 "Sir"
//3 "Sir"

Ⅳ.new繫結

function foo(){
    this.a = 1;
    this.b = 2;
}
var instance = new foo();
console.log(instance.a);

發生函式的構造呼叫時自動執行以下操作

• 建立一個全新的物件
• 此物件會被執行[[Prototype]]連結
• 此新物件會繫結到函式呼叫的this（new繫結）
• 執行此函式程式碼
• 若函式無返回值，則自動返回此新物件

Ⅴ.箭頭函式的this

function foo(){
    return (a)=>{
        console.log(this.a);
    }
}
var obj1 = {a:2};
var obj2 = {a:3};
var bar = foo.apply(obj1);
bar.apply(obj2);        //2

• 箭頭函式是ES6中的語法。無法使用以上幾種規則。
• 其根據外層的作用域來決定this
• 箭頭函式的繫結無法修改，new繫結也不行