JavaScript中的this详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:func
13         };
14         
15         obj.func1();//this--->obj
16         
17         //广义对象
18         document.getElementById("div").onclick = function(){
19             this.style.backgroundColor = "red";
20         };//this--->div
21         
22         //③函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
23         var arr = [func,1,2,3];
24         arr[0](); //this--->数组arr
25         
26         //④函数作为window内置函数的回调函数调用:this指向window
27         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--->arr
15         
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/  

以上是关于JavaScript中的this详解的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中的this详解

JavaScript中的this

JavaScript中的this详解

js中的this关键字详解

javascript函数作用域及this指向详解

javascript函数作用域及this指向详解