深入淺析js中的 this

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

一.this的指向問題

在學習this的指向問題之前我們需要明白兩點：

1：this永遠指向一個對象；

2：this的指向完全取決于函數調用的位置；

針對上面第一點我們能很好理解，因為在javascript中一切都是對象。第二點其實也是好理解，當函數調用的位置不同是，this的指向的對象就不同，所以可以說this的指向可以動態變換的，下面我們先通過一個簡單的例子來看一下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的指向的變化，因為有一個函數在對象change里面，所以this就是指向的函數外部的對象，所以輸出了hello。

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

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

對象中的方法，事件綁定 ，構造函數 ，定時器

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

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

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

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

而在 setInterval('obj.fun()',1000) 中的第一個參數，實際則是傳入的一段可執行的 JS 代碼；1000毫秒后當 JS 引擎來執行這段代碼時，則是通過 obj 對象來找到 fun 函數并調用執行，那么函數的運行環境依然在 對象 obj 內，所以函數內部的this也就指向了 obj 對象；

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

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

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

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

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

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

// 創建一個含有bar方法的obj對象，
// bar返回一個函數，
// 這個函數返回this，
// 這個返回的函數是以箭頭函數創建的，
// 所以它的this被永久綁定到了它外層函數的this。
// bar的值可以在調用中設置，這反過來又設置了返回函數的值。
var obj = {
 bar: function() {
  var x = (() => this);
  return x;
 }
};

// 作為obj對象的一個方法來調用bar，把它的this綁定到obj。
// 將返回的函數的引用賦值給fn。
var fn = obj.bar();

// 直接調用fn而不設置this，
// 通常(即不使用箭頭函數的情況)默認為全局對象
// 若在嚴格模式則為undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而沒有調用它
var fn2 = obj.bar;
// 那么調用箭頭函數后，this指向window，因為它從 bar 繼承了this。
console.log(fn2()() == window); // true

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

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。