JavaScript 中的 this

 

全局執行

首先，咱們在全局環境中看看它的 this 是什麼：

1. 瀏覽器：

console.log(this); // Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…} 

能夠看到打印出了 `window` 對象；

2. node：

console.log(this); // global 

能夠看到打印出了 `global` 對象；

總結：在全局做用域中它的 `this` 執行當前的全局對象（瀏覽器端是 `Window`，node 中是 `global`）。

函數中執行

1. 純粹的函數調用

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

function test() {
  console.log(this);
};
test();
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

咱們能夠看到，一個函數被直接調用的時候，屬於全局調用，這時候它的 `this` 指向 全局對象；

2. 嚴格模式: '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` 指向全局對象。

1. 一些坑

咱們常常在回調函數裏面會遇到一些坑：

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`，就能夠指向當前的這個對象了；

2. 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);`；

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` 函數爲例；

1. 爲一個普通函數指定 this

var obj = {
  name: 'qiutc'
};
function foo() {
  console.log(this);
}
foo.call(obj);
// Object {name: "qiutc"}

能夠看到，在執行 `foo.call(obj)` 的時候，函數內的 `this` 指向了 `obj` 這個對象，成功；

2. 爲對象中的方法指定一個 this

var obj = { name: 'qiutc', foo: function () { console.log(this); } } var obj2 = { name: 'tcqiu222222' }; obj.foo.call(obj2); // Object {name: "tcqiu222222"} 

能夠看到，執行函數的時候這裏的 `this` 指向了 `obj2`，成功；

3. 爲構造函數指定 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` 不起做用，可是傳入參數仍是起做用了；

4. 爲箭頭函數指定 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`。

我妻小寵22 天前

• 念頭函數的this只是綁定在最近的父做用域上。