題記

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

開篇

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

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

探索一

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

如我們上文所說的this的最終指向的是那個調(diào)用它所在函數(shù)的對象，這里a其實是由window對象點出來的。

探索二

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

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

探索三

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

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

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

這里需要補充三點：

如果一個函數(shù)中有this，但是它沒有被上一級的對象所調(diào)用，那么this指向的就是window。 如果一個函數(shù)中有this，這個函數(shù)有被上一級的對象所調(diào)用，那么this指向的就是上一級的對象。 如果一個函數(shù)中有this，這個函數(shù)中包含多個對象，盡管這個函數(shù)是被最外層的對象所調(diào)用，this指向的也只是它上一級的對象。

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

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

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

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

這里之所以對象s1可以點出函數(shù)Student里面的name 是因為new關(guān)鍵字可以改變this的指向，將這個this指向?qū)ο髎1.

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

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

解： this.num所在的函數(shù)為定時器setInterval內(nèi)的function () { console.log(this.num);}，根據(jù)this指向原則當該函數(shù)被執(zhí)行，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綁定到這個函數(shù)上 }; } var o = new Obj(); o.getNum1();//1 (o.num) o.getNum2();//1 (o.num)

解釋：

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

根據(jù)原則：

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

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

以上就是詳解JavaScript中的this指向問題的詳細內(nèi)容，更多關(guān)于JavaScript this指向的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！