zoukankan      html  css  js  c++  java
  • 函数上下文的判断

    一、如果是函数名圆括号执行这个函数,函数的上下文就是window

    <script type="text/javascript">
      var a=100;
      function myfun(a,b,c,d){
          console.log(this.a);//100
          var a=200;
          console.log(this.a)//100
          console.log(a); //200
      }
    myfun();
    </script>

    提示:①一定要记住,谁才有this的属性;是函数对象才有this属性;

               ②狭义对象没有函数的上下文之后

    二、如果函数作为对象的方法,最后是某一个对象打点调用这个方法,函数的上下文就是这个对象

    <script type="text/javascript">  
    var people={
        'name':'小明',
        'age' :18,
        'sex':'男',
        'say':function(){
             console.log(this);  //people这个对象
             console.log(this.age); //18
         }
    }
    people.say();
    </script>

    注意:如果函数作为对象的方法,而且是某个函数最后打点调用,这个函数的上下文就是这个对象

    三、如果函数作为定时器的回调函数,函数的上下文为window

    <script type="text/javascript">
      var a=100;
      setInterval(function(){
          a++;
          console.log(this);
          console.log(this.a);
      },1000)
    
    </script>

    四、如果函数作为事件的处理函数,函数的上下文就是这个,触发这个事件的这个对象;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        p{
            height:20px;
            300px;
            background: pink;
            margin:10px 0;
        }
        </style>
    </head>
    <body>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </body>
    </html>
    <script type="text/javascript">
      var p0=document.getElementsByTagName('p')[0];
      var p1=document.getElementsByTagName('p')[1];
      var p2=document.getElementsByTagName('p')[2];
      var p3=document.getElementsByTagName('p')[3];
      function changeColor(argument) {
                this.style.background = "blue";
            }
           p0.onclick = changeColor;
           p1.onclick = changeColor;
           p2.onclick = changeColor;
           p3.onclick = changeColor;
    
    </script>

    提示:事件处理函数的上下文,当谁触发这个事件,函数的上下文就是这个对象

    五、如果函数作为数组的元素,函数通过数组枚举出来圆括号执行,函数的上下文是这个数组

    <script type="text/javascript">
    var arr=[fn,1,2,3,4,5,6,7];
     function fn(){
         console.log(this);
         console.log(this.length);
        // console.log(arguments);
     }
    arr[0]();
    </script>

  • 相关阅读:
    HTML5文件上传前本地预览
    sql(2) DISTINCT
    sql (1)
    delphi 第4课
    delphi 第3课
    Delphi 第2课
    delphi 用户可以点击格式修改进行模板修改
    delphi 流程单打印
    Delphi 第一课
    【BZOJ4530】[Bjoi2014]大融合 LCT维护子树信息
  • 原文地址:https://www.cnblogs.com/smivico/p/7967238.html
Copyright © 2011-2022 走看看