JavaScript 中的 this !

tip

首先，我知道這篇文章很無聊，無非就是關於 js 中的 this，並且也已經有千千萬萬的文章寫過這部分內容了；

但是，我還是想寫一篇關於 js 中的 this 的文章，算是一個總結歸納吧；（大神們可以繞行看我的其他文章?）

在 js 中，this 這個上下文總是變化莫測，很多時候出現 bug 總是一頭霧水，其實，只要分清楚不同的情況下如何執行就 ok 了。

全域性執行

首先，我們在全域性環境中看看它的 this 是什麼：

first. 瀏覽器：

console.log(this);

// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

可以看到列印出了 window 物件；

second. node：

console.log(this);

// global

可以看到列印出了 global 物件；

總結：在全域性作用域中它的 this 執行當前的全域性物件（瀏覽器端是 Window，node 中是 global）。

函式中執行

純粹的函式呼叫

這是最普通的函式使用方法了：

function test() {
  console.log(this);
};

test();

// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

我們可以看到，一個函式被直接呼叫的時候，屬於全域性呼叫，這時候它的 this 指向 全域性物件；

嚴格模式 ‘use strict’;

如果在嚴格模式的情況下執行純粹的函式呼叫，那麼這裡的的 this 並不會指向全域性，而是 undefined，這樣的做法是為了消除 js 中一些不嚴謹的行為：

'use strict';
function test() {
  console.log(this);
};

test();

// undefined

當然，把它放在一個立即執行函式中會更好，避免了汙染全域性：

(function (){
  "use strict";
　console.log(this);
})();

// undefined

作為物件的方法呼叫

當一個函式被當作一個物件的方法呼叫的時候：

var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this.name);
  }
}

obj.foo();

// 'qiutc'

這時候，this 指向當前的這個物件；

當然，我們還可以這麼做：

function test() {
  console.log(this.name);
}
var obj = {
  name: 'qiutc',
  foo: test
}

obj.foo();

// 'qiutc'

同樣不變，因為在 js 中一切都是物件，函式也是一個物件，對於 test ，它只是一個函式名，函式的引用，它指向這個函式，當 foo = test，foo 同樣也指向了這個函式。

如果把物件的方法賦值給一個變數，然後直接呼叫這個變數呢：

var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  }
}

var test = obj.foo;
test();

// Window

可以看到，這時候 this 執行了全域性，當我們把 test = obj.foo ，test 直接指向了一個函式的引用，這時候，其實和 obj 這個物件沒有關係了，所以，它是被當作一個普通函式來直接呼叫，因此，this 指向全域性物件。

一些坑

我們經常在回撥函式裡面會遇到一些坑：

var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    setTimeout(this.foo, 1000);
  }
}

obj.foo2();

執行這段程式碼我們會發現兩次列印出來的 this 是不一樣的：

第一次是 foo2 中直接列印 this，這裡指向 obj 這個物件，我們毋庸置疑；

但是在 setTimeout 中執行的 this.foo ，卻指向了全域性物件，這裡不是把它當作函式的方法使用嗎？這一點經常讓很多初學者疑惑；
其實，setTimeout 也只是一個函式而已，函式必然有可能需要引數，我們把 this.foo 當作一個引數傳給 setTimeout 這個函式，就像它需要一個 fun 引數，在傳入引數的時候，其實做了個這樣的操作 fun = this.foo，看到沒有，這裡我們直接把 fun 指向 this.foo 的引用；執行的時候其實是執行了 fun() 所以已經和 obj 無關了，它是被當作普通函式直接呼叫的，因此 this 指向全域性物件。

這個問題是很多非同步回撥函式中普遍會碰到的；

解決

為了解決這個問題，我們可以利用 閉包 的特性來處理：

var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    var _this = this;
    setTimeout(function() {
      console.log(this);  // Window

      console.log(_this);  // Object {name: "qiutc"}
    }, 1000);
  }
}

obj.foo2();

可以看到直接用 this 仍然是 Window；因為 foo2 中的 this 是指向 obj，我們可以先用一個變數 _this 來儲存，然後在回撥函式中使用 _this，就可以指向當前的這個物件了；

setTimeout 的另一個坑

之前啊說過，如果直接執行回撥函式而沒有繫結作用域，那麼它的 this 是指向全域性物件(window)，在嚴格模式下會指向 undefined，然而在 setTimeout 中的回撥函式在嚴格模式下卻表現出不同：

'use strict';

function foo() {
  console.log(this);
}

setTimeout(foo, 1);

// window

按理說我們加了嚴格模式，foo 呼叫也沒有指定 this，應該是出來 undefined，但是這裡仍然出現了全域性物件，難道是嚴格模式失效了嗎？

並不，即使在嚴格模式下，setTimeout 方法在呼叫傳入函式的時候，如果這個函式沒有指定了的 this，那麼它會做一個隱式的操作—-自動地注入全域性上下文，等同於呼叫 foo.apply(window) 而非 foo()；

當然，如果我們在傳入函式的時候已經指定 this，那麼就不會被注入全域性物件，比如： setTimeout(foo.bind(obj), 1);；

http://stackoverflow.com/questions/21957030/why-is-window-still-defined-in-this-strict-mode-code

作為一個建構函式使用

在 js 中，為了實現類，我們需要定義一些建構函式，在呼叫一個建構函式的時候需要加上 new 這個關鍵字：

function Person(name) {
  this.name = name;
  console.log(this);
}

var p = new Person('qiutc');

// Person {name: "qiutc"}

我們可以看到當作建構函式呼叫時，this 指向了這個建構函式呼叫時候例項化出來的物件；

當然，建構函式其實也是一個函式，如果我們把它當作一個普通函式執行，這個 this 仍然執行全域性：

function Person(name) {
  this.name = name;
  console.log(this);
}

var p = Person('qiutc');

// Window

其區別在於，如何呼叫函式（new）。

箭頭函式

在 ES6 的新規範中，加入了箭頭函式，它和普通函式最不一樣的一點就是 this 的指向了，還記得在上文中（作為物件的方法呼叫-一些坑-解決）我們使用閉包來解決 this 的指向問題嗎，如果用上了箭頭函式就可以更完美的解決了：

var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    setTimeout(() => {
      console.log(this);  // Object {name: "qiutc"}
    }, 1000);
  }
}

obj.foo2();

可以看到，在 setTimeout 執行的函式中，本應該列印出在 Window，但是在這裡 this 卻指向了 obj，原因就在於，給 setTimeout 傳入的函式（引數）是一個箭頭函式：

函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

根據例子我們理解一下這句話：
在 obj.foo2() 執行的時候，當前的 this 指向 obj；在執行 setTimeout 時候，我們先是定義了一個匿名的箭頭函式，關鍵點就在這，箭頭函式內的 this 執行定義時所在的物件，就是指向定義這個箭頭函式時作用域內的 this，也就是 obj.foo2 中的 this，即 obj；所以在執行箭頭函式的時候，它的 this -> obj.foo2 中的 this -> obj；

簡單來說， 箭頭函式中的 this 只和定義它時候的作用域的 this 有關，而與在哪裡以及如何呼叫它無關，同時它的 this 指向是不可改變的。

call, apply, bind

在 js 中，函式也是物件，同樣也有一些方法，這裡我們介紹三個方法，他們可以更改函式中的 this 指向：

• call

  fun.call(thisArg[, arg1[, arg2[, ...]]])
  

它會立即執行函式，第一個引數是指定執行函式中 this 的上下文，後面的引數是執行函式需要傳入的引數；

• apply

  fun.apply(thisArg[, [arg1, arg2, ...]])
  

它會立即執行函式，第一個引數是指定執行函式中 this 的上下文，第二個引數是一個陣列，是傳給執行函式的引數（與 call 的區別）；

• bind

  var foo = fun.bind(thisArg[, arg1[, arg2[, ...]]]);
  

它不會執行函式，而是返回一個新的函式，這個新的函式被指定了 this 的上下文，後面的引數是執行函式需要傳入的引數；

這三個函式其實大同小異，總的目的就是去指定一個函式的上下文（this），我們以 call 函式為例；

為一個普通函式指定 this

var obj = {
  name: 'qiutc'
};

function foo() {
  console.log(this);
}

foo.call(obj);

// Object {name: "qiutc"}

可以看到，在執行 foo.call(obj) 的時候，函式內的 this 指向了 obj 這個物件，成功；

為物件中的方法指定一個 this

var obj = {
  name: 'qiutc',
  foo: function () {
    console.log(this);
  }
}

var obj2 = {
  name: 'tcqiu222222'
};

obj.foo.call(obj2);

// Object {name: "tcqiu222222"}

可以看到，執行函式的時候這裡的 this 指向了 obj2，成功；

為建構函式指定 this

function Person(name) {
  this.name = name;
  console.log(this);
}

var obj = {
  name: 'qiutc2222222'
};

var p = new Person.call(obj, 'qiutc');

// Uncaught TypeError: Person.call is not a constructor(…)

這裡報了個錯，原因是我們去 new 了 Person.call 函式，而非 Person ，這裡的函式不是一個建構函式；

換成 bind 試試：

function Person(name) {
  this.name = name;
  console.log(this);
}

var obj = {
  name: 'qiutc2222222'
};

var Person2 = Person.bind(obj);

var p = new Person2('qiutc');

// Person {name: "qiutc"}

console.log(obj);

// Object {name: "qiutc2222222"}

列印出來的是 Person 例項化出來的物件，而和 obj 沒有關係，而 obj 也沒有發生變化，說明，我們給 Person 指定 this 上下文並沒有生效；

因此可以得出： 使用 bind 給一個建構函式指定 this，在 new 這個建構函式的時候，bind 函式所指定的 this 並不會生效；

當然 bind 不僅可以指定 this ，還能傳入引數，我們來試試這個操作：

function Person(name) {
  this.name = name;
  console.log(this);
}

var obj = {
  name: 'qiutc2222222'
};

var Person2 = Person.bind(obj, 'qiutc111111');

var p = new Person2('qiutc');

// Person {name: "qiutc111111"}

可以看到，雖然指定 this 不起作用，但是傳入引數還是起作用了；

為箭頭函式指定 this

我們來定義一個全域性下的箭頭函式，因此這個箭頭函式中的 this 必然會指向全域性物件，如果用 call 方法改變 this 呢：

var afoo = (a) => {
  console.log(a);
  console.log(this);
}

afoo(1);

// 1
// Window

var obj = {
  name: 'qiutc'
};

afoo.call(obj, 2);

// 2
// Window

可以看到，這裡的 call 指向 this 的操作並沒有成功，所以可以得出： 箭頭函式中的 this 在定義它的時候已經決定了（執行定義它的作用域中的 this），與如何呼叫以及在哪裡呼叫它無關，包括 (call, apply, bind) 等操作都無法改變它的 this。

只要記住箭頭函式大法好，不變的 this。