在學(xué)習(xí)javascript中我們往往會被this的指向問題弄的頭昏轉(zhuǎn)向，今天我們就來學(xué)習(xí)一下this的指向問題，和改變this指向的方法。

一.this的指向問題

在學(xué)習(xí)this的指向問題之前我們需要明白兩點：

1：this永遠(yuǎn)指向一個對象；

2：this的指向完全取決于函數(shù)調(diào)用的位置；

針對上面第一點我們能很好理解，因為在javascript中一切都是對象。第二點其實也是好理解，當(dāng)函數(shù)調(diào)用的位置不同是，this的指向的對象就不同，所以可以說this的指向可以動態(tài)變換的，下面我們先通過一個簡單的例子來看一下this的指向是變換的

<script>function fun(){ console.log(this.name); } var change={ name:’hello’, f:fun } var name =’world’ var result=change.f()//hello fun();//world</script>

通過上述例子我們可以很清楚的看到this的指向的變化，因為有一個函數(shù)在對象change里面，所以this就是指向的函數(shù)外部的對象，所以輸出了hello。

想必看完上述例子后大家對this的動態(tài)指向切換有了一定的了解。

那么接下來，我們對this使用最頻繁的幾種情況做一個總結(jié)，最常見的基本就是以下3種：

對象中的方法，事件綁定 ，構(gòu)造函數(shù) ，定時器

前兩個就不必多說了，我們看一下定時器中的this指向問題，

var obj = { fun:function(){ this ; }}​setInterval(obj.fun,1000); // this指向window對象setInterval(’obj.fun()’,1000); // this指向obj對象

setInterval() 是window對象下內(nèi)置的一個方法，接受兩個參數(shù)，第一個參數(shù)允許是一個函數(shù)或者是一段可執(zhí)行的 JS 代碼，第二個參數(shù)則是執(zhí)行前面函數(shù)或者代碼的時間間隔；

在上面的代碼中，setInterval(obj.fun,1000) 的第一個參數(shù)是obj對象的fun ，因為 JS 中函數(shù)可以被當(dāng)做值來做引用傳遞，實際就是將這個函數(shù)的地址當(dāng)做參數(shù)傳遞給了 setInterval 方法，換句話說就是 setInterval 的第一參數(shù)接受了一個函數(shù)，那么此時1000毫秒后，函數(shù)的運(yùn)行就已經(jīng)是在window對象下了，也就是函數(shù)的調(diào)用者已經(jīng)變成了window對象，所以其中的this則指向的全局window對象；

而在 setInterval(’obj.fun()’,1000) 中的第一個參數(shù)，實際則是傳入的一段可執(zhí)行的 JS 代碼；1000毫秒后當(dāng) JS 引擎來執(zhí)行這段代碼時，則是通過 obj 對象來找到 fun 函數(shù)并調(diào)用執(zhí)行，那么函數(shù)的運(yùn)行環(huán)境依然在 對象 obj 內(nèi)，所以函數(shù)內(nèi)部的this也就指向了 obj 對象；

除了這些我們還需要理解三個可以改變this指向的函數(shù)，包括箭頭函數(shù)，call（），apply（）

箭頭函數(shù)：官方有解釋，箭頭函數(shù)引入的其中一個原因，就是其不綁定this；在箭頭函數(shù)中，箭頭函數(shù)的this被設(shè)置為封閉的詞法環(huán)境的，換句話說，箭頭函數(shù)中的this取決于該函數(shù)被創(chuàng)建時的環(huán)境。

var globalObject = this;var foo = (() => this);console.log(foo() === globalObject); // true// 接著上面的代碼// 作為對象的一個方法調(diào)用var obj = {foo: foo};console.log(obj.foo() === globalObject); // true// 嘗試使用call來設(shè)定thisconsole.log(foo.call(obj) === globalObject); // true// 嘗試使用bind來設(shè)定thisfoo = foo.bind(obj);console.log(foo() === globalObject); // true

無論如何，foo 的 this 被設(shè)置為他被創(chuàng)建時的環(huán)境（在上面的例子中，就是全局對象）。這同樣適用于在其他函數(shù)內(nèi)創(chuàng)建的箭頭函數(shù)：這些箭頭函數(shù)的this被設(shè)置為封閉的詞法環(huán)境的。

// 創(chuàng)建一個含有bar方法的obj對象，// bar返回一個函數(shù)，// 這個函數(shù)返回this，// 這個返回的函數(shù)是以箭頭函數(shù)創(chuàng)建的，// 所以它的this被永久綁定到了它外層函數(shù)的this。// bar的值可以在調(diào)用中設(shè)置，這反過來又設(shè)置了返回函數(shù)的值。var obj = { bar: function() { var x = (() => this); return x; }};// 作為obj對象的一個方法來調(diào)用bar，把它的this綁定到obj。// 將返回的函數(shù)的引用賦值給fn。var fn = obj.bar();// 直接調(diào)用fn而不設(shè)置this，// 通常(即不使用箭頭函數(shù)的情況)默認(rèn)為全局對象// 若在嚴(yán)格模式則為undefinedconsole.log(fn() === obj); // true// 但是注意，如果你只是引用obj的方法，// 而沒有調(diào)用它var fn2 = obj.bar;// 那么調(diào)用箭頭函數(shù)后，this指向window，因為它從 bar 繼承了this。console.log(fn2()() == window); // true

call和apply方法：將一個對象作為call或者apply的第一個參數(shù)，this將會被綁定到這個參數(shù)對象上

var obj = {parent:’男’};var parent = ’28’;function child(obj){ console.log(this.parent);}child(); // 28 child.call(obj); //男child.apply(obj); //男

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。