JS中的this的应用总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中的this的应用总结相关的知识，希望对你有一定的参考价值。
简述this的用法
“this是由被调用的方式确定”这个事实，使得this可以被改变，从而为函数增加了动态性，可变性，使得变成更加灵活。目前因为工作经验有限，暂时总结
一下五种情况下的this的用法，以后有时间应该从ECMA规范上来深入地理解一下this的应用。
1.情况一：以函数的形式调用，this是window
1 console.log(this);//window 2 function fu(){ 3 console.log(this); 4 } 5 fu();//window
2.情况二：以方法的形式调用，this是调用方法的对象
1 var obj ={name:‘this‘}; 2 function foo(){ 3 console.log(this); 4 } 5 obj.foo=foo; 6 obj.foo();//输出obj { name: ‘this‘, foo: [Function: foo] }
3.情况三 ： 以构造函数的形式调用
1 function D() { 2 this.name =‘test‘; 3 this.age =18; 4 console.log(this); 5 } 6 var d = new D();//输出d对象 7 d.name =‘hewenfeng‘; 8 D();//window 9 console.log(d);//输出d对象
4.情况四： 在全局作用域中调用
1 console.log(this);//window
5. 情况五：在响应函数中，给谁绑定事件，this就是谁。
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta charset="UTF-8"> 5 6 </head> 7 <body> 8 <div id="b" onclick="console.log(this)"> 9 <div> 10 </body> 11 </html> 12 输出：div元素本身 13 14 <!DOCTYPE HTML> 15 <html > 16 <head> 17 <meta charset="UTF-8"> 18 </head> 19 <body> 20 <div id="b" onclick="console.log(this)"> 21 <div> 22 23 <script type="text/javascript"> 24 var c=document.getElementById("b"); 25 c.onclick=function(){console.log(1)} 26 27 </script> 28 </body> 29 </html> 30 输出：1 31 onclick的绑定方式会覆盖内联式的事件绑定。也可以在c.onclick里输出this，可知道this代表div元素本身。 32 33 <!DOCTYPE HTML> 34 <html > 35 <head> 36 <meta charset="UTF-8"> 37 </head> 38 <body> 39 <div id="b" onclick="console.log(this)"> 40 <div> 41 42 <script type="text/javascript"> 43 var c=document.getElementById("b"); 44 c.onclick=function(){console.log(1)} 45 c.addEventListener("click",function(){alert(‘2‘)},false) 46 </script> 47 </body> 48 </html> 49 输出：1,弹出
addEventListener不会覆盖c.onclick绑定的函数，（自然也不会覆盖内联的onclick，addEventListener就是以叠加的方式绑定事件处理函数的，
就像用addEventListener也可以绑定几个事件处理函数一样）也可以在addEventListener的事件处理函数里输出this，可知道this代表div元素本身。
以上是关于JS中的this的应用总结的主要内容，如果未能解决你的问题，请参考以下文章