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
。