tip

首先，我知道這篇文章很無聊，無非就是關(guān)于 js 中的 this，并且也已經(jīng)有千千萬萬的文章寫過這部分內(nèi)容了； 
但是，我還是想寫一篇關(guān)于 js 中的 this 的文章，算是一個總結(jié)歸納吧；（大神們可以繞行看我的其他文章） 
在 js 中，this 這個上下文總是變化莫測，很多時候出現(xiàn) bug 總是一頭霧水，其實，只要分清楚不同的情況下如何執(zhí)行就 ok 了。 

全局執(zhí)行
首先，我們在全局環(huán)境中看看它的 this 是什么： 
first. 瀏覽器：

console.log(this);

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

可以看到打印出了 window 對象； 

second. node：

 console.log(this);

// global 

可以看到打印出了 global 對象； 

總結(jié)：在全局作用域中它的 this 執(zhí)行當前的全局對象（瀏覽器端是 Window，node 中是 global）。 

函數(shù)中執(zhí)行
純粹的函數(shù)調(diào)用 
這是最普通的函數(shù)使用方法了：

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

test();

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

我們可以看到，一個函數(shù)被直接調(diào)用的時候，屬于全局調(diào)用，這時候它的 this 指向 全局對象； 

嚴格模式 ‘use strict'; 

如果在嚴格模式的情況下執(zhí)行純粹的函數(shù)調(diào)用，那么這里的的 this 并不會指向全局，而是 undefined，這樣的做法是為了消除 js 中一些不嚴謹?shù)男袨椋?br />

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

test();

// undefined 

當然，把它放在一個立即執(zhí)行函數(shù)中會更好，避免了污染全局：

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

// undefined 

作為對象的方法調(diào)用 
當一個函數(shù)被當作一個對象的方法調(diào)用的時候：

 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 中一切都是對象，函數(shù)也是一個對象，對于 test ，它只是一個函數(shù)名，函數(shù)的引用，它指向這個函數(shù)，當 foo = test，foo 同樣也指向了這個函數(shù)。 

如果把對象的方法賦值給一個變量，然后直接調(diào)用這個變量呢：

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

var test = obj.foo;
test();

// Window 

可以看到，這時候 this 執(zhí)行了全局，當我們把 test = obj.foo ，test 直接指向了一個函數(shù)的引用，這時候，其實和 obj 這個對象沒有關(guān)系了，所以，它是被當作一個普通函數(shù)來直接調(diào)用，因此，this 指向全局對象。 

一些坑 

我們經(jīng)常在回調(diào)函數(shù)里面會遇到一些坑：

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

obj.foo2(); 

執(zhí)行這段代碼我們會發(fā)現(xiàn)兩次打印出來的 this 是不一樣的： 

第一次是 foo2 中直接打印 this，這里指向 obj 這個對象，我們毋庸置疑； 

但是在 setTimeout 中執(zhí)行的 this.foo ，卻指向了全局對象，這里不是把它當作函數(shù)的方法使用嗎？這一點經(jīng)常讓很多初學者疑惑；

其實，setTimeout 也只是一個函數(shù)而已，函數(shù)必然有可能需要參數(shù)，我們把 this.foo 當作一個參數(shù)傳給 setTimeout 這個函數(shù)，就像它需要一個 fun參數(shù)，在傳入?yún)?shù)的時候，其實做了個這樣的操作 fun = this.foo，看到?jīng)]有，這里我們直接把 fun 指向 this.foo 的引用；執(zhí)行的時候其實是執(zhí)行了 fun() 所以已經(jīng)和 obj 無關(guān)了，它是被當作普通函數(shù)直接調(diào)用的，因此 this 指向全局對象。 

這個問題是很多異步回調(diào)函數(shù)中普遍會碰到的； 

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

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 來儲存，然后在回調(diào)函數(shù)中使用 _this，就可以指向當前的這個對象了； 

setTimeout 的另一個坑 

之前啊說過，如果直接執(zhí)行回調(diào)函數(shù)而沒有綁定作用域，那么它的 this 是指向全局對象(window)，在嚴格模式下會指向 undefined，然而在setTimeout 中的回調(diào)函數(shù)在嚴格模式下卻表現(xiàn)出不同：

 'use strict';
function foo() {
 console.log(this);
}
setTimeout(foo, 1);

// window 

按理說我們加了嚴格模式，foo 調(diào)用也沒有指定 this，應該是出來 undefined，但是這里仍然出現(xiàn)了全局對象，難道是嚴格模式失效了嗎？ 

并不，即使在嚴格模式下，setTimeout 方法在調(diào)用傳入函數(shù)的時候，如果這個函數(shù)沒有指定了的 this，那么它會做一個隱式的操作—-自動地注入全局上下文，等同于調(diào)用 foo.apply(window) 而非 foo()； 

當然，如果我們在傳入函數(shù)的時候已經(jīng)指定 this，那么就不會被注入全局對象，比如： setTimeout(foo.bind(obj), 1);；  

作為一個構(gòu)造函數(shù)使用 

在 js 中，為了實現(xiàn)類，我們需要定義一些構(gòu)造函數(shù)，在調(diào)用一個構(gòu)造函數(shù)的時候需要加上 new 這個關(guān)鍵字：

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

var p = new Person('qiutc');

// Person {name: "qiutc"} 

我們可以看到當作構(gòu)造函數(shù)調(diào)用時，this 指向了這個構(gòu)造函數(shù)調(diào)用時候?qū)嵗鰜淼膶ο螅?nbsp;

當然，構(gòu)造函數(shù)其實也是一個函數(shù)，如果我們把它當作一個普通函數(shù)執(zhí)行，這個 this 仍然執(zhí)行全局：

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

var p = Person('qiutc');

// Window 

其區(qū)別在于，如何調(diào)用函數(shù)（new）。

 箭頭函數(shù) 

在 ES6 的新規(guī)范中，加入了箭頭函數(shù)，它和普通函數(shù)最不一樣的一點就是 this 的指向了，還記得我們使用閉包來解決 this 的指向問題嗎，如果用上了箭頭函數(shù)就可以更完美的解決了：

 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 執(zhí)行的函數(shù)中，本應該打印出在 Window，但是在這里 this 卻指向了 obj，原因就在于，給 setTimeout 傳入的函數(shù)（參數(shù)）是一個箭頭函數(shù)： 

函數(shù)體內(nèi)的this對象，就是定義時所在的對象，而不是使用時所在的對象。 

根據(jù)例子我們理解一下這句話： 
在 obj.foo2() 執(zhí)行的時候，當前的 this 指向 obj；在執(zhí)行 setTimeout 時候，我們先是定義了一個匿名的箭頭函數(shù)，關(guān)鍵點就在這，箭頭函數(shù)內(nèi)的this 執(zhí)行定義時所在的對象，就是指向定義這個箭頭函數(shù)時作用域內(nèi)的 this，也就是 obj.foo2 中的 this，即 obj；所以在執(zhí)行箭頭函數(shù)的時候，它的 this -> obj.foo2 中的 this -> obj； 

簡單來說， 箭頭函數(shù)中的 this 只和定義它時候的作用域的 this 有關(guān)，而與在哪里以及如何調(diào)用它無關(guān)，同時它的 this 指向是不可改變的。 

call, apply, bind 

在 js 中，函數(shù)也是對象，同樣也有一些方法，這里我們介紹三個方法，他們可以更改函數(shù)中的 this 指向：
 call

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

它會立即執(zhí)行函數(shù)，第一個參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文，后面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)； 

apply

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

它會立即執(zhí)行函數(shù)，第一個參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文，第二個參數(shù)是一個數(shù)組，是傳給執(zhí)行函數(shù)的參數(shù)（與 call 的區(qū)別）；
 bind

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

它不會執(zhí)行函數(shù)，而是返回一個新的函數(shù)，這個新的函數(shù)被指定了 this 的上下文，后面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)； 

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

為一個普通函數(shù)指定 this

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

// Object {name: "qiutc"} 

可以看到，在執(zhí)行 foo.call(obj) 的時候，函數(shù)內(nèi)的 this 指向了 obj 這個對象，成功； 

為對象中的方法指定一個 this

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

var obj2 = {
 name: 'tcqiu222222'
};

obj.foo.call(obj2);

// Object {name: "tcqiu222222"} 

可以看到，執(zhí)行函數(shù)的時候這里的 this 指向了 obj2，成功； 

為構(gòu)造函數(shù)指定 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(…) 

這里報了個錯，原因是我們?nèi)?new 了 Person.call 函數(shù)，而非 Person ，這里的函數(shù)不是一個構(gòu)造函數(shù)； 

換成 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 沒有關(guān)系，而 obj 也沒有發(fā)生變化，說明，我們給 Person 指定 this 上下文并沒有生效； 

因此可以得出：使用 bind 給一個構(gòu)造函數(shù)指定 this，在 new 這個構(gòu)造函數(shù)的時候，bind 函數(shù)所指定的 this 并不會生效； 

當然 bind 不僅可以指定 this ，還能傳入?yún)?shù)，我們來試試這個操作：

 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 不起作用，但是傳入?yún)?shù)還是起作用了； 

為箭頭函數(shù)指定 this 

我們來定義一個全局下的箭頭函數(shù)，因此這個箭頭函數(shù)中的 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 的操作并沒有成功，所以可以得出：箭頭函數(shù)中的 this 在定義它的時候已經(jīng)決定了（執(zhí)行定義它的作用域中的 this），與如何調(diào)用以及在哪里調(diào)用它無關(guān)，包括 (call, apply, bind) 等操作都無法改變它的 this。 

只要記住箭頭函數(shù)大法好，不變的 this。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論