前言

如果要問javascript中哪兩個知識點容易混淆，作用域查詢和this機制絕對名列前茅。所以這篇文章開始將介紹javascript中this的四個綁定規則，下面來一起看看吧。

綁定規則

1. 默認綁定

獨立函數調用時，this 指向全局對象，如果使用嚴格模式，那么全局對象無法使用默認綁定， this綁定至 undefined。

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

嚴格模式時：

function foo() { "use strict"; console,log(this.a);}var a = 2;foo(); // TypeError: this is undefined

2. 隱式綁定

當函數引用有上下文對象時（即函數作為引用屬性被添加到對象中），隱式綁定規則會把函數調用中的 this 綁定到這個上下文對象。

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

對象屬性引用鏈中只有最頂層或者說最后一層會影響調用位置：

obj1.obj2.foo(); // foo 中的 this 與 obj2 綁定

2.1 隱式丟失

隱式丟失指的是函數中的 this 丟失綁定對象，即它會應用第 1 條的默認綁定規則，從而將 this 綁定到全局對象或者 undefined 上，取決于是否在嚴格模式下運行。以下情況會發生隱式丟失：

綁定至上下文對象的函數被賦值給一個新的函數，然后調用這個新的函數時：

function foo() { console.log( this.a);}var obj = { a: 2, foo: foo};var bar = obj.foo; //函數別名var a = "這是全局變量喔";bar(); // "這是全局變量喔"

傳入回調函數時：

function foo() { console.log( this.a);}function doFoo(fn) { fn(); // <-- 調用位置}var obj = { a: 2, foo: foo};var a = "這是全局變量喔";doFoo( obj.foo ); // "這是全局變量喔"

其實這就是第一種情況的變種，實際上參數傳遞就是一種隱式賦值。除了開發人員自定義的函數，在將函數傳入語言內置的函數比如 setTimeout 時，同樣會發生隱式丟失的情況。

3. 顯式綁定

顯式綁定的核心是 JavaScript 內置的 call(..) 和 apply(..) 方法，這兩個方法在 JavaScript 提供的絕大多數函數以及開發者自己創建的所有函數上都可以使用。

call(..) 和 apply(..)的第一個參數是一個對象（二者區別在后面傳入的參數形式，這里不是重點，不討論），他們會將 this 綁定到這個對象上。因為你可以直接指定 this 綁定的對象，所以這條規則被稱為顯式綁定。

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