詳解JavaScript中的this指向問題

Posted on by

題記

JS中的this指向一直是個讓初學者頭疼的問題。今天，我們就一起來瞅瞅this倒地是咋回事，詳細說說this指向原則，從此不再為瞭this指向操碎瞭心。

開篇

首先我們都知道this是Javascript語言的一個關鍵字。

它代表函數運行時，自動生成的一個內部對象，隻能在函數內部使用。隨著函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this的指向在函數定義的時候是確定不瞭的，隻有函數執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調用它所在函數的對象。 那麼接下來我們一步步探索下這個問題。

探索一

function a() {
  var user = "清蒸胖頭魚";
  console.log(this.name); //undefined
  console.log(this); //Window
 }
 a();
 window.a();//兩種結果相同

如我們上文所說的this的最終指向的是那個調用它所在函數的對象，這裡a其實是由window對象點出來的。

探索二

var obj = {
  name: '清蒸胖頭魚',
  f1: function () {
   console.log(this.name);//清蒸胖頭魚
  }
 };
 obj.f1();

再次強調一點this的指向在函數定義的時候是確定不瞭的，隻有函數執行的時候才能確定this到底指向誰；這個例子this所在的f1函數是由obj對象調用的，所以這裡的this指向obj對象。

探索三

如果要徹底的搞懂this必須看接下來的幾個例子

var obj = {
  a: 5,
  b: {
   a: 10,
   fn: function () {
    console.log(this.a); //10
   }
  }
 };
 obj.b.fn();

不是說this的最終指向的是那個調用它所在函數的對象嗎？這裡為什麼不指向obj對象呢？

這裡需要補充三點：

  1. 如果一個函數中有this，但是它沒有被上一級的對象所調用，那麼this指向的就是window。
  2. 如果一個函數中有this，這個函數有被上一級的對象所調用，那麼this指向的就是上一級的對象。
  3. 如果一個函數中有this，這個函數中包含多個對象，盡管這個函數是被最外層的對象所調用，this指向的也隻是它上一級的對象。

看到這相信大傢基本掌握瞭this指向的原則瞭吧，再碎碎念一遍：this的指向在函數定義的時候是確定不瞭的，隻有函數執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調用它所在函數的對象。

下面給大傢介紹this幾種不同的使用情況

構造函數(new 關鍵字)情況

function Student() {
  this.name = '清蒸胖頭魚';
 }
 var s1 = new Student();
 console.log(s1.name);// 清蒸胖頭魚

這裡之所以對象s1可以點出函數Student裡面的name 是因為new關鍵字可以改變this的指向，將這個this指向對象s1.

// new 關鍵字執行的過程
 1. 在函數體內創建一個空的對象.
 2. 讓當前this指向這個空的對象.
 3. 通過this給當前空的對象添加鍵值對.
 4. 返回已經添加好所有鍵值對的對象給外面的變量.

定時器裡的this指向情況

var num = 0;
 function Obj() {
  this.num = 1;
  this.getNum1 = function () {
   console.log(this.num);
  };
  this.getNum2 = function () {
   setInterval(function () {
    console.log(this.num);
   }, 1000);
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//0 (window.num)

o.getNum2()值之所以為0，也就是這裡的this指向window，再拿出我們的this指向原則解釋：this的指向在函數定義的時候是確定不瞭的，隻有函數執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調用它所在函數的對象。

解： this.num所在的函數為定時器setInterval內的function () { console.log(this.num);}，根據this指向原則當該函數被執行，this指向它的上一級對象。setInterval，又因setInterval是window點出瞭的，所以this指向window。

call、apply、bind 改變指向情況

var num = 0;
 function Obj() {
  this.num = 1;
  this.getNum1 = function () {
   console.log(this.num);
  };
  this.getNum2 = function () {
   setInterval(function () {
    console.log(this.num);
   }.bind(this), 1000);//利用bind將this綁定到這個函數上
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//1 (o.num)

解釋：

bind()方法是Function.prototype上的一個方法,當被綁定函數調用時,bind方法會創建一個新函數，並將第一個參數作為新函數的運行時的this。

根據原則：

沒使用bind方法前：被調用時：this.num指向的是調用它所在函數的對象，也就是window.setTimeout對象。 使用bind方法後：被調用時：將原來的this重新指向到→調用getSum2函數（就是新this所在的函數）的對象。這裡構造函數，通過new調用，所以指向o對象。

bind方法在該情況比較常用,當然如果使用call或apply方法來代替也行，得到的結果也是正確的，但是call和apply方法會在調用後馬上執行，那樣就沒瞭延時的效果，定時器也就沒有意義瞭。

以上就是詳解JavaScript中的this指向問題的詳細內容，更多關於JavaScript this指向的資料請關註WalkonNet其它相關文章！

推薦閱讀：