理解 this 綁定

this 是什麼？如今請不要往下看，告訴本身一個答案，什麼是 this？它是一個指針？一個對象仍是一個函數？其實遠沒有那麼複雜！

• this 是什麼
• 如何定位 this
• 僞裝有總結
• 參考資料

this 是什麼

名不正則言不順。今天咱們來整理下 this 的簡單定義！this 是 Javascript 中的一個關鍵字，它表明了函數調用的上下文。

• 若是包含 this 的函數是被對象做爲方法調用的，this 就指向這個調用對象，這個時候能夠說， this 是一個對象（默認綁定）
• 若是該函數是直接調用的，那麼在嚴格模式下，this 指向 undefined，非嚴格模式下 this 指向 window（隱式綁定）
• 若是 this 是經過 new 關鍵字調用的，也就是經過構造函數調用的，那麼 this 指向 new 返回的對象實例（隱式綁定，能夠理解爲構造函數時一種特殊的函數）
• 若是 this 是經過 apply，call，bind 調用，那麼 this 指向調用是綁定的對象（顯式綁定）

也就是說，this 並非具體的什麼東西。它只有在函數運行的時候纔會存在，它存在於運行時的世界中。因此當你看到

function call() {
  /* 這裏有不少代碼*/
  console.log(this);
  /* 這裏有不少代碼*/
}
複製代碼

這樣的代碼的時候，this 在這裏並無什麼意義。咱們應該關注的是在何時 call() 和 如何 call()。如今請簡單複習下，當咱們經過下面幾種方式調用的時候，this 關鍵字指向了哪裏？

new call();
call();
call.bind(null,);
call.apply(null, []);
複製代碼

如何定位 this

關於定位 this，先介紹一個簡單粗暴的萬金油來講明如何判斷；

1. 是否有點操做符？若是有，左邊的就是 this
2. 是否有 call 或者 apply？若是有，第一個逗號傳進來的，就是 this
3. 方法是被單獨調用的嗎？若是是，全局對象上下文，就是 this

經過這三點，咱們能夠判斷出絕大多數的 this 指向。少部分的就是上面提到的經過構造函數調用的方式。請看下面這個例子：

var p2 = null;
function Person(name) {
  this.name = name;
  this.age = 8;
  console.log(this); // {name: 'todd', age: 8}
  p2 = this;
}

var p1 = new Person('todd');

console.log(p1 === p2) // true
複製代碼

咱們看到，當函數（構造函數） Person 經過關鍵字調用的時候，此時 this 並無指向全局上下文，而是指向 new 操做符返回的對象。經過 p1 === p2 的結果能夠證實。this 的判斷規則十分簡單，只要記住前面提到的三種方法再加上 new 關鍵字的場景，咱們能夠對所有 this 的調用場景作以區分。好比：

var name = "windowsName";

    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            },100 );
        }

    };

    a.func2()     // this.func1 is not a function
複製代碼

這道題目的 this，看似花裏胡哨。其實咱們只要根據第三點判斷就垂手可得。this 的運行時是在一個定時器中，由於它是匿名函數被單獨調用，其上下文是全局，因此沒有func1 這個方法。因此必然報錯。

僞裝有總結

沒什麼好總結的，若是你有更好的建議，請留言討論吧！

參考資料

1. How to Eyeball Your ‘This’ Context in Javascript
2. this,apply,call,bind