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详解的主要内容,如果未能解决你的问题,请参考以下文章