• 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元素本身。




  • 相关阅读:
    JavaScript面试题
    HTML&&css面试题
    nodejs面试题
    linux上安装apache
    linux上安装mysql
    linux基础命令学习(三)Vim使用
    linux基础命令学习(一)
    spring学习(六)注解方式实现AOP
    spring学习(五)详细介绍AOP
    spring学习(一)spring简介
  • 原文地址:https://www.cnblogs.com/xiaoyinspy/p/7812087.html
Copyright © 2020-2023  润新知