this对象

这里主要说的是函数内的this。 this是在函数调用时创建的执行上下文中自 动生成的一个内部属性，它会绑定（指向）一 个对象。但是函数在不同的调用方式下其 内部this会绑定不同的对象。各绑定规则如下:

一、普通函数

普通函数（无论全局还是局部）直接调用，其 this指向全局对象window。

  

   

    

     

    
    

     

      //全局函数
     
    
   

    

     

    
    

     

      function A() {
     
    
   

    

     

    
    

     
    console.log(this)
     
    
   

    

     

    
    

     

      )
     
    
   

    

     

    
    

     

      A(); //Window
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      --------------
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      //局部函数
     
    
   

    

     

    
    

     

      function aa() {
     
    
   

    

     

    
    

     
    function bb() {
     
    
   

    

     

    
    

     
        console.log(this)；//Window
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
    bb()
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      aa();
     
    
  
 

二、立即执行函数

立即执行函数中的this指向全局对象 window。

  

   

    

     

    
    

     

      (function() { 
     
    
   

    

     

    
    

     
    console.log(this); //Window
     
    
   

    

     

    
    

     

      })();
     
    
  
 

三、对象里的方法

当一个方法被调用时，this指向调用该方法的对象。

  

   

    

     

    
    

     

      var obj = {
     
    
   

    

     

    
    

     
    sayName: function() {
     
    
   

    

     

    
    

     
        console.log(this);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      obj.sayName(); //obj
     
    
  
 

四、构造函数

this指向新创建的实例对象。

  

   

    

     

    
    

     

      function Obj() {
     
    
   

    

     

    
    

     
    this.name = 'xiao'; //Obj作为构造函数被调用,函数体内的this被绑定为新创建的对象person。
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var person = new Obj();
     
    
   

    

     

    
    

     

      console.log(person.name); //xiao
     
    
  
 

五、调用call/apply/bind的函数

作用是改变函数的调用对象，即改变函数 this的指向，指向第一个参数对象。

  

   

    

     

    
    

     

      var d = {
     
    
   

    

     

    
    

     
    getThis: function(){
     
    
   

    

     

    
    

     
        console.log(this)
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var e = {
     
    
   

    

     

    
    

     
    name: 'xiao'
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      d.getThis.call(e) //e
     
    
  
 

六、箭头函数

ECMA262规范中表明箭头函数不会生成执行上下文，也就没有自己的this。所以它的 this是词法，按词法解析this,即在定义时就已经和外层执行上下文的this绑定了。箭头函数的this始终等于外层上下文的this, 外层this指向谁，箭头函数this就指向谁。

  

   

    

     

    
    

     

      var f = {
     
    
   

    

     

    
    

     
    getThis:()=>{
     
    
   

    

     

    
    

     
        console.log(this)
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      f.getThis(); //Window '箭头函数中的this等于其外层中的this,即全局环境中的this,等于window
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ---------------
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      var objl = {
     
    
   

    

     

    
    

     
    age: 1,
     
    
   

    

     

    
    

     
    say: function() {
     
    
   

    

     

    
    

     
        setTimeout(() => {
     
    
   

    

     

    
    

     
            console.log(this,this.age); //obj1 1
     
    
   

    

     

    
    

     
            //此处this等于其外层函数say中的this,指向调用say的obj1'
     
    
   

    

     

    
    

     

              },0);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }；
     
    
   

    

     

    
    

     

      obj1.say()
     
    
  
 

七、事件绑定函数

事件绑定里的this指向调用该函数的dom 对象。

  

   

    

     

    
    

     

      var btn = document.querySelector('.btn');
     
    
   

    

     

    
    

     

      btn.onclick = function() {
     
    
   

    

     

    
    

     
    console.log(this); // btn 对象
     
    
   

    

     

    
    

     

      } 
     
    
  
 

八、定时器函数

定时器函数里的this指向的是window。

  

   

    

     

    
    

     

      setTimeout(function() {
     
    
   

    

     

    
    

     
    console.log(this);//window
     
    
   

    

     

    
    

     

      ),1000);
     
    
  
 

文章来源: root181.blog.csdn.net，作者：前端纸飞机，版权归原作者所有，如需转载，请联系作者。

原文链接：root181.blog.csdn.net/article/details/119851102