題記

JS中的this指向一直是個(gè)讓初學(xué)者頭疼的問(wèn)題。今天，我們就一起來(lái)瞅瞅this倒地是咋回事，詳細(xì)說(shuō)說(shuō)this指向原則，從此不再為了this指向操碎了心。

開(kāi)篇

首先我們都知道this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字。

它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。隨著函數(shù)使用場(chǎng)合的不同，this的值會(huì)發(fā)生變化。但是有一個(gè)總的原則，那就是this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)，實(shí)際上this的最終指向的是那個(gè)調(diào)用它所在函數(shù)的對(duì)象。 那么接下來(lái)我們一步步探索下這個(gè)問(wèn)題。

探索一

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

如我們上文所說(shuō)的this的最終指向的是那個(gè)調(diào)用它所在函數(shù)的對(duì)象，這里a其實(shí)是由window對(duì)象點(diǎn)出來(lái)的。

探索二

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

再次強(qiáng)調(diào)一點(diǎn)this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)；這個(gè)例子this所在的f1函數(shù)是由obj對(duì)象調(diào)用的，所以這里的this指向obj對(duì)象。

探索三

如果要徹底的搞懂this必須看接下來(lái)的幾個(gè)例子

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

不是說(shuō)this的最終指向的是那個(gè)調(diào)用它所在函數(shù)的對(duì)象嗎？這里為什么不指向obj對(duì)象呢？

這里需要補(bǔ)充三點(diǎn)：

1. 如果一個(gè)函數(shù)中有this，但是它沒(méi)有被上一級(jí)的對(duì)象所調(diào)用，那么this指向的就是window。
2. 如果一個(gè)函數(shù)中有this，這個(gè)函數(shù)有被上一級(jí)的對(duì)象所調(diào)用，那么this指向的就是上一級(jí)的對(duì)象。
3. 如果一個(gè)函數(shù)中有this，這個(gè)函數(shù)中包含多個(gè)對(duì)象，盡管這個(gè)函數(shù)是被最外層的對(duì)象所調(diào)用，this指向的也只是它上一級(jí)的對(duì)象。

看到這相信大家基本掌握了this指向的原則了吧，再碎碎念一遍：this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)，實(shí)際上this的最終指向的是那個(gè)調(diào)用它所在函數(shù)的對(duì)象。

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

構(gòu)造函數(shù)(new 關(guān)鍵字)情況

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

這里之所以對(duì)象s1可以點(diǎn)出函數(shù)Student里面的name 是因?yàn)閚ew關(guān)鍵字可以改變this的指向，將這個(gè)this指向?qū)ο髎1.

// new 關(guān)鍵字執(zhí)行的過(guò)程
 1. 在函數(shù)體內(nèi)創(chuàng)建一個(gè)空的對(duì)象.
 2. 讓當(dāng)前this指向這個(gè)空的對(duì)象.
 3. 通過(guò)this給當(dāng)前空的對(duì)象添加鍵值對(duì).
 4. 返回已經(jīng)添加好所有鍵值對(duì)的對(duì)象給外面的變量.

定時(shí)器里的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指向原則解釋?zhuān)?code>this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)，實(shí)際上this的最終指向的是那個(gè)調(diào)用它所在函數(shù)的對(duì)象。

解： this.num所在的函數(shù)為定時(shí)器setInterval內(nèi)的function () { console.log(this.num);}，根據(jù)this指向原則當(dāng)該函數(shù)被執(zhí)行，this指向它的上一級(jí)對(duì)象。setInterval，又因setInterval是window點(diǎn)出了的，所以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綁定到這個(gè)函數(shù)上
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//1 (o.num)
 

解釋?zhuān)?/p>

bind()方法是Function.prototype上的一個(gè)方法,當(dāng)被綁定函數(shù)調(diào)用時(shí),bind方法會(huì)創(chuàng)建一個(gè)新函數(shù)，并將第一個(gè)參數(shù)作為新函數(shù)的運(yùn)行時(shí)的this。

根據(jù)原則：

沒(méi)使用bind方法前：被調(diào)用時(shí)：this.num指向的是調(diào)用它所在函數(shù)的對(duì)象，也就是window.setTimeout對(duì)象。 使用bind方法后：被調(diào)用時(shí)：將原來(lái)的this重新指向到→調(diào)用getSum2函數(shù)（就是新this所在的函數(shù)）的對(duì)象。這里構(gòu)造函數(shù)，通過(guò)new調(diào)用，所以指向o對(duì)象。

bind方法在該情況比較常用,當(dāng)然如果使用call或apply方法來(lái)代替也行，得到的結(jié)果也是正確的，但是call和apply方法會(huì)在調(diào)用后馬上執(zhí)行，那樣就沒(méi)了延時(shí)的效果，定時(shí)器也就沒(méi)有意義了。

以上就是詳解JavaScript中的this指向問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于JavaScript this指向的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論