首页 > 代码库 > 【JavaScript中的this详解】
【JavaScript中的this详解】
前言
this用法说难不难，有时候函数调用时，往往会搞不清楚this指向谁？那么，关于this的用法，你知道多少呢？
下面我来给大家整理一下关于this的详细分析，希望对大家有所帮助！
this指向的规律
this指向的规律往往与函数调用的方式息息相关；this指向的情况，取决于函数调用的方法有哪些。
我们来看一下姜浩五大定律：
姜浩五大定律：
①通过函数名()直接调用：this指向window；
②通过对象.函数名()调用的：this指向这个对象；
③函数作为数组的一个元素，通过数组下标调用的：this指向这个数组；
④函数作为window内置函数的回调函数调用：this指向window，setTimeout，setInterval等……；
⑤函数作为构造函数，用new关键字调用时：this指向新new出的对象。
对于this指向谁，我们记住一句就行：谁最终调用函数，this就指向谁！
因为，
①this指向的永远只可能是对象！
②this指向谁，永远不取决于this写在哪！而是取决于函数在哪调用！！！
③this指向的对象，我们称之为函数的上下文context，也叫函数的调用者。
多说无益，理论不如实践，大家一起来看下面的代码：
HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript中的this详解</title> 6 </head> 7 8 <body> 9 <div id="div">1111</div> 10 </body>11 </html>
JS代码：
1 function func(){ 2 console.log(this); 3 } 4 5 //①通过函数名()直接调用：this指向window 6 func(); 7 8 //②通过对象.函数名()调用的：this指向这个对象 9 //狭义对象10 var obj = {11 name:"obj",12 func1:func13 };14 15 obj.func1();//this--->obj16 17 //广义对象18 document.getElementById("div").onclick = function(){19 this.style.backgroundColor = "red";20 };//this--->div21 22 //③函数作为数组的一个元素，通过数组下标调用的：this指向这个数组23 var arr = [func,1,2,3];24 arr[0](); //this--->数组arr25 26 //④函数作为window内置函数的回调函数调用：this指向window27 setTimeout(func,1000);28 //setInterval(func,1000);29 30 //⑤函数作为构造函数，用new关键字调用时：this指向新new出的对象31 var obj = new func();//this--->new出的新obj
看过代码之后，对于this的指向及用法，你了解透彻了么？
下面我们来做个小练习巩固一下this指向的五大定律。
看代码↓↓↓：
HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript中的this详解</title> 6 </head> 7 8 <body> 9 <div id="div">1111</div> 10 </body>11 </html>
JS代码：
1 var obj1 = { 2 name:‘obj1‘, 3 arr:[setTimeout(func,3000),1,2,3] 4 } 5 document.getElementById("div").onclick = obj1.arr[0]; 6 //函数最终调用者：setTimeout，符合规律⑤ this--->window 7 8 9 var obj2 = {10 name:‘obj1‘,11 arr:[func,1,2,3]12 }13 document.getElementById("div").onclick = obj2.arr[0]();14 //函数最终调用者：数组下标，符合规律③ this--->arr15 16 17 var obj3 = {18 name:‘obj1‘,19 arr:[{name:‘arrObj‘,fun:func},1,2,3]20 }21 document.getElementById("div").onclick = obj3.arr[0].fun();22 //函数最终调用者：{name:‘arrObj‘,fun:func},符合规律② this--->obj
this的用法，你掌握了么？
今天的内容就先分享到这里，希望可以帮到你~如有问题，欢迎留言评论，大家一起交流，一起进步！
作者：夕照希望
出处：http://www.cnblogs.com/hope666/
出处：http://www.cnblogs.com/hope666/
【JavaScript中的this详解】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。