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>

    以上为本期分享内容,希望本篇博客可以对广大开发者朋友有所帮助!如果有需要补充的部分,可在下方评论区予以补充。

如果本篇内容对你有所帮助,欢迎收藏,原创内容,欢迎大家积极评论转载和推荐!

posted @ 2017-05-09 21:13 Q的前端世界 阅读(...) 评论(...) 编辑 收藏