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>
以上为本期分享内容，希望本篇博客可以对广大开发者朋友有所帮助！如果有需要补充的部分，可在下方评论区予以补充。
如果本篇内容对你有所帮助，欢迎收藏，原创内容，欢迎大家积极评论转载和推荐！
