• 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况


    JavaScript中this的四种情况(非严格模式)


     

    1、当this所在函数是事件处理函数时,this指向事件源。
    2、当this所在函数是构造函数时,this指向new出来的对象。
    3、this所在函数的所属对象是谁,this指向函数所属对象。
    4、当this所在函数没有所属对象,this指向window对象

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="utf-8" />  
            <title></title>  
        </head>  
        <body>  
              <div id="box" class="box" style="height: 100px; 100px; background:#f3f3f3;"></div>
        </body>  
    </html>  
      
    <script type="text/javascript">  
    //this  
    //1、当this所在函数是事件处理函数时,this是事件源。  
    document.getElementById("box").onclick = function(){  
     console.log(this); //this就是div.box 
    }  
      
    //2、当this所在函数是构造函数时,this是new出来的对象。  
    function Person(name){  
        this.name = name;//this就是new出来的对象zhaosi
        console.log(this.name)
        this.eat = function(){  
            console.log(this.name+"is eatting");
        }  
    }  
    var zhaosi = new Person("赵四");  
      
    // 3、this所在函数的所属对象是谁,this就是谁。  
    function Person(name){  
     this.name = name;//就是new出来的对象liuneng
     this.eat = function(){  
         console.log(this.name+"is eatting");;//这个this是谁,谁调用eat,或者说调用eat时,前面的对象是谁,this就是谁  
     }  
    }  
    var liuneng = new Person("刘能");  
    liuneng.eat();//这句话执行时,eat函数内部的this就是p1  
    var laoqi = new Person("老七");  
    laoqi.eat();//这句话执行时,eat函数内部的this就是p2  
      
    //4、当this所在函数没有所属对象,this是window对象。全局变量都是window对象的属性。 
    function test(){  
        console.log(this);//这个this就是window  
    }  
      
    test();//window对象可以省略,所以,这句话就等价于window.test();  
      
    //全局变量是window对象的属性  
    var t = "大脚";  
      
    console.log(window.t);  
      
    var obj = {  
        name:"李四"
    }  
      
    console.log(window.obj.name);  
      
    //this转移是经常碰到的问题  
    //1)、注意区分this所在函数调用时的隶属对象
      
    //2)、如果不希望被this折磨可以选用ES6中的箭头函数。  
      
    </script> 
  • 相关阅读:
    USACO / Longest Prefix最长前缀(DP)
    (转)HDOJ 4006 The kth great number(优先队列)
    STL priority_queue(优先队列(堆))
    康托展开
    USACO / Magic Squares(经典BFS+Cantor展开hash)
    国家集训队论文分类整理
    国家集训队论文分类整理
    国家集训队论文分类整理
    OI / ACM 知识归纳
    学年总结跋涉ACM之路
  • 原文地址:https://www.cnblogs.com/witkeydu/p/8432229.html
Copyright © 2020-2023  润新知