JavaScript中的this詳解

2021-07-09 03:26:45 字數 1543 閱讀 2596

this屬於js的底層知識,了解this之後,能夠實現一些基本的功能,但是感覺最重要的是,this是物件導向必不可少的組成部分,如果希望能夠逐漸的掌握物件導向,this必然是不可少的。

檢視this指向的一句話法則:

永遠指向其所在函式的所有者如果沒有所有者時,指向window。

理解this的要點:關鍵在於將函式與函式名分開看待。同乙個函式,在不同的執行方法下,會有不同的效果。

如何來進行理解呢,來看幾個例項

1)全域性函式中的this指向

function test()

2)物件方法中的this指向

h5course.test = function()

3)繫結函式時的this

如下**,test1和test2中this並不相同

var test2 = h5course.test1;//test2這個函式並沒有所有者,在此,test2雖然呼叫了test1這個函式,但是this仍然指向window,而不是指向test1的擁有者:物件h5course

test2();

h5course.test1 = function()

這便是上面所說的,要將函式與函式名分開看待

4)繫結函式時的this

此時如果我們對3)中的**進行一些修改:

function test ()

test();//this指向window

var h5course = {};

h5course.test2 = test;

h5course.test2();//此時test2的所有者為h5course,而test沒有所有者,this在此時指向的是h5course

alert(h5course.test2);

歡迎溝通交流~html5學堂

5)滑鼠單擊事件等進行函式的繫結時,this的指向

document.οnclick=function()

6)settimeout等傳參形式的this指向

不要去看傳的引數中函式的所有者,看執行函式的所有var obj = {};

obj.x = 1;

obj.y = 2;

window.x = 100;

window.y = 200;

obj.add = function ()

settimeout(obj.add,1000);//this指向window,輸出為300

settimeout(function(),1000);

var oo = {};

oo.test3 = function()

var h5course = {};

oo.test3.call(h5course);//this指向的是()內的第乙個引數,此處為h5course

window.x = 100;

var oo = {};

alert(this.x+y+z+k);

}var arr=[2,3,4]

oo.test3.call(window,2,3,4);//this指向window,輸出為109

ajax中的suceess函式使用this

今天在寫ajax的時候,後台返回資料給前台,可是總是不能把資料正常顯示在頁面上.明明已經進入了success函式了,並且在該 的前後都能夠正常執行.success function responsetest else 除錯了半天,原來在ajax中使用this,就不再是我們原來頁面上的this了 下面...

ajax中的suceess函式使用this

tags 解決錯誤 今天在寫ajax的時候,後台返回資料給前台,可是總是不能把資料正常顯示在頁面上.明明已經進入了success函式了,並且在該 的前後都能夠正常執行.success function responsetest else 複製 除錯了半天,原來在ajax中使用this,就不再是我們原...

ajax中的suceess函式使用this

今天在寫ajax的時候,後台返回資料給前台,可是總是不能把資料正常顯示在頁面上.明明已經進入了success函式了,並且在該 的前後都能夠正常執行.success function responsetest else 除錯了半天,原來在ajax中使用this,就不再是我們原來頁面上的this了 下面...