JS中的this的应用总结

时间：2022-06-05 15:27:30
 简述this的用法
　　“this是由被调用的方式确定”这个事实，使得this可以被改变，从而为函数增加了动态性，可变性，使得变成更加灵活。目前因为工作经验有限，暂时总结
一下五种情况下的this的用法，以后有时间应该从ECMA规范上来深入地理解一下this的应用。
1.情况一：以函数的形式调用，this是window
         console.log(this);//window

         function fu(){

             console.log(this);

         }

         fu();//window
2.情况二：以方法的形式调用，this是调用方法的对象
     　　var obj ={name:'this'};

         function foo(){

             console.log(this);

         }

         obj.foo=foo;

         obj.foo();//输出obj   { name: 'this', foo: [Function: foo] }
3.情况三 ： 以构造函数的形式调用
         function D() {

             this.name ='test';

             this.age =18;

             console.log(this);

         }

         var d = new D();//输出d对象

         d.name ='hewenfeng';

         D();//window

         console.log(d);//输出d对象
4.情况四： 在全局作用域中调用
      console.log(this);//window 
5. 情况五：在响应函数中，给谁绑定事件，this就是谁。
 <!DOCTYPE HTML>

 <html >

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <div id="b" onclick="console.log(this)">

 <div>

 </body>

 </html>

 输出：div元素本身

 <!DOCTYPE HTML>

 <html >

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <div id="b" onclick="console.log(this)">

 <div> 

 <script type="text/javascript">

 var c=document.getElementById("b");

 c.onclick=function(){console.log(1)}

 </script>

 </body>

 </html>

 输出：1

 onclick的绑定方式会覆盖内联式的事件绑定。也可以在c.onclick里输出this，可知道this代表div元素本身。

 <!DOCTYPE HTML>

 <html >

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <div id="b" onclick="console.log(this)">

 <div> 

 <script type="text/javascript">

 var c=document.getElementById("b");

 c.onclick=function(){console.log(1)}

 c.addEventListener("click",function(){alert('2')},false)

 </script>

 </body>

 </html>

 输出：1,弹出
　　addEventListener不会覆盖c.onclick绑定的函数，（自然也不会覆盖内联的onclick，addEventListener就是以叠加的方式绑定事件处理函数的，
就像用addEventListener也可以绑定几个事件处理函数一样）也可以在addEventListener的事件处理函数里输出this，可知道this代表div元素本身。
相关文章