JavaScript面向對象編程—this詳解

this詳解

作者的話

在JavaScriptOPPt面向對象編程中,this這位老大哥,相信大家不會陌生。大家在遇到this時,很多朋友難免會有個疑問:“這個this是什麼,它到底指向誰?”

今天,博主針對this的指向問題,進行了整理。本篇博客,博主給大家詳盡介紹了不同情況下,this的指向!!以下奉上博主總結的關於this的指向詳解,希望對各位開發者朋友有所幫助:

1、誰最終調用函數,this指向誰。

①this指向的,永遠只可能是對象!!!!!

②this指向誰,永遠不取決於this寫在哪,而是取決於this在哪調用;

③this指向的對象,我們稱之為函數的上下文context,也叫函數的調用者

2、*****this指向的規律(與函數調用的方式息息相關)

this指向的情況,取決於函數調用的方式有哪些:

①通過函數名直接調用的:this指向window

②通過對象.函數名調用的:this指向這個對象;

③函數作為數組的一個元素,通過數組下標調用的:this指向這個數組

④函數作為window內置函數的回調函數調用時:this指向window

setTimeout(func,1000);setInterval等

⑤函數作為構造函數,用new關鍵字調用時:this指向的是new出的新對象

實例演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>this詳解</title>
</head>
<body>
<div id="div"></div>
</body>
<script type="text/javascript">

function func (name) {
console.log(this);


}
func;//window
//狹義對象
var obj={
name:"obj",
func1:func
};
obj.func1;//obj
//廣義對象
document.getElementById("div").onclick=function  {
this.style.backgroundColor="red";
};//this指向div    

//函數作為數組的一個元素,通過數組下標調用的:this指向這個數組
var arr=[func,1,2,3]
arr[0];

//函數作為window內置函數的回調函數調用時:this指向window
setTimeout(func,1000);
//setInterval等

//函數作為構造函數,用new關鍵字調用時:this指向的是new出的新對象
var obj=new func;//this指向的是new出的新obj



/*
* 綜合小練習
*/
var obj1={
name:"obj1",
arr:[setTimeout(func,5000),1,2,3]
}
document.getElementById("div").onclick=obj1.arr[0];//函數最終調用者:setTimeout;符合規律⑤,this指向window

var obj1={
name:"obj1",
arr:[func,1,2,3]
}
document.getElementById("div").onclick=obj1.arr[0];//函數最終調用者:arr數組下標;符合規律③,this指向arr

var obj1={
name:"obj1",
arr:[{name:'arrObj',fun:func},1,2,3]
}
document.getElementById("div").onclick=obj1.arr[0].fun;//函數最終調用者:對象;符合規律②,this指向{name:'arrObj',fun:func}這個對象

</script>
</html>

以上為本期分享內容,希望本篇博客可以對廣大開發者朋友有所幫助!如果有需要補充的部分,可在下方評論區予以補充。

如果本篇內容對你有所幫助,歡迎收藏,原創內容,歡迎大家積極評論轉載和推薦!

相關推薦

推薦中...