您好,登錄后才能下訂單哦!
JavaScript中this指向什么?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
它代表函數(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();
再次強(qiáng)調(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ù)的對象。
構(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. 讓當(dāng)前this指向這個空的對象. 3. 通過this給當(dāng)前空的對象添加鍵值對. 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指向原則當(dāng)該函數(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上的一個方法,當(dāng)被綁定函數(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
方法在該情況比較常用,當(dāng)然如果使用call
或apply
方法來代替也行,得到的結(jié)果也是正確的,但是call
和apply
方法會在調(diào)用后馬上執(zhí)行,那樣就沒了延時的效果,定時器也就沒有意義了。
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。