js中的this指向

js this指向

1-----全局中this指向window

console.log(this);//window
 
function abc(){
    console.log(this);//window
}

2-----对象中的this

对象中属性的this,指的是外层的this,因为这时候对象还没有创建完成

对象中的方法是在对象执行完成以后才调用的.所以this就是当前对象

   var a=10;
   var obj1={
       a:100,
       c:this.a,//window  这时候对象还没有创建完成,指向外层的this,即为window
       init:function(){
        //    this
                var obj={
                a:1,
                c:this.a,//属性描述this,obj1
                b:function(){
                    console.log(this.a);// 方法中使用this,指向该对象obj
                }
            }
       }
   }

var obj = {
   a: 1,
   c: this.a,//属性描述this为window
   b: function () {
       // 方法中使用this
       console.log(this.a); //1  this为obj   
       this.d();//this为obj  
       // obj.d();//不能写出obj.d();因为obj可能会更改
   },
   d:function(){
       console.log("aaa");
   }
} 
obj.b();

3-------回调函数中的this指向window

function abc(){
     console.log(this);//window  这个函数是回调函数
 }
var obj={
    a:function(){
        console.log(this);//obj
        var arr=[1,2,3];
        arr.forEach(function(){
            console.log(this);//window 这个forEach中的函数是回调函数
        })
        this.b(this.c);
        this.b(abc);
    },
    b:function(fn){
        fn();
        console.log(this,"_____");//obj
    },
    c:function(){
        console.log(this);//window  这个函数是回调函数
    }
}

obj.a();

4------事件回调函数中的this被修改成e.currentTarget

    // 事件侦听
    document.addEventListener("click",clickHandler);
    // 事件回调函数
    function clickHandler(e){
    console.log(this)// this--->e.currentTarget
    }

5-----箭头函数中的this

箭头函数中的this是window

当箭头函数和回调函数一起时,箭头函数改变了this指向，将指向箭头函数外层的this

  var obj={
      a:function(){
          var arr=[1,2,3];
          arr.forEach(function(){
              console.log(this);//遵从于回调函数的this指向。window
              // this.d();//报错,window中没有方法d
          });
          arr.forEach(item=>{
              console.log(this)//obj
              // this 因为使用了箭头函数，就会忽略了回调函数的this指向
          })
          document.addEventListener("click",this.clickHandler);
          document.addEventListener("click",e=>{
              console.log(this)//obj
              // this 因为使用箭头函数，就会忽略了事件函数中this指向
              this.d();
          })
      },
      clickHandler:function(e){
          console.log(this)//遵从于事件函数中this---e.currentTarget
          // this.d();//报错  this为document事件对象
      },
      d:function(){
          console.log(this)
      }
  }
  obj.a();