深入淺析js中的 this

深入淺析js中的 this？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

一.this的指向問(wèn)題

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

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

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

針對(duì)上面第一點(diǎn)我們能很好理解，因?yàn)樵趈avascript中一切都是對(duì)象。第二點(diǎn)其實(shí)也是好理解，當(dāng)函數(shù)調(diào)用的位置不同是，this的指向的對(duì)象就不同，所以可以說(shuō)this的指向可以動(dòng)態(tài)變換的，下面我們先通過(guò)一個(gè)簡(jiǎn)單的例子來(lá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>

通過(guò)上述例子我們可以很清楚的看到this的指向的變化，因?yàn)橛幸粋€(gè)函數(shù)在對(duì)象change里面，所以this就是指向的函數(shù)外部的對(duì)象，所以輸出了hello。

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

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

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

前兩個(gè)就不必多說(shuō)了，我們看一下定時(shí)器中的this指向問(wèn)題，

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

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

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

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

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

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

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
// 接著上面的代碼
// 作為對(duì)象的一個(gè)方法調(diào)用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 嘗試使用call來(lái)設(shè)定this
console.log(foo.call(obj) === globalObject); // true

// 嘗試使用bind來(lái)設(shè)定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

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

// 創(chuàng)建一個(gè)含有bar方法的obj對(duì)象，
// bar返回一個(gè)函數(shù)，
// 這個(gè)函數(shù)返回this，
// 這個(gè)返回的函數(shù)是以箭頭函數(shù)創(chuàng)建的，
// 所以它的this被永久綁定到了它外層函數(shù)的this。
// bar的值可以在調(diào)用中設(shè)置，這反過(guò)來(lái)又設(shè)置了返回函數(shù)的值。
var obj = {
 bar: function() {
  var x = (() => this);
  return x;
 }
};

// 作為obj對(duì)象的一個(gè)方法來(lái)調(diào)用bar，把它的this綁定到obj。
// 將返回的函數(shù)的引用賦值給fn。
var fn = obj.bar();

// 直接調(diào)用fn而不設(shè)置this，
// 通常(即不使用箭頭函數(shù)的情況)默認(rèn)為全局對(duì)象
// 若在嚴(yán)格模式則為undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而沒(méi)有調(diào)用它
var fn2 = obj.bar;
// 那么調(diào)用箭頭函數(shù)后，this指向window，因?yàn)樗鼜?bar 繼承了this。
console.log(fn2()() == window); // true

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

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。