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。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。