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);；
作為一個構造函數使用
在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// Windowvar obj = { name: 'qiutc'};afoo.call(obj, 2);// 2// Window可以看到，這裡的call 指向this 的操作並沒有成功，所以可以得出：箭頭函數中的this 在定義它的時候已經決定了（執行定義它的作用域中的this），與如何調用以及在哪裡調用它無關，包括(call, apply, bind) 等操作都無法改變它的this。
只要記住箭頭函數大法好，不變的this。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。