js----万恶的this指向

1.this---->undefined

ES6的严格模式中，如果调用函数中的this或者顶层this将会被指向undefined

<script type="module">//type="module"--->严格模式
	function fn(){
	     console.log(this);//this--->undefined
	}
	fn();
	console.log(this);//this--->undefined
</script>

2.this---->window

1、非严格模式中函数或者顶层中调用this，会被指向window
2、回调函数中默认this的指向是window
3、当使用call，apply，bind时，如果带入的第一个参数是null或者undefined时，this默认会被指向window

3.this---->上下文环境中的this

1、箭头函数

var obj={
      a:function(){
           setTimeout(()=>{
               this.b();//this--->obj
               //this就是当前箭头函数外的上下文中this指向
               // setTimeout外面的this是什么这个箭头函数中的this就是什么
           },500)
           document.addEventListener("click",e=>{
               this.clickhandler(e)//this--->obj
               // 这里的this指向addEventListener函数外上下文环境中this的指向
           });
      },
      b:function(){
           console.log("aaa");
      },
      clickhandler:function(e){

      }
}

2、对象的属性中this也是上下环境中this的指向

var c=20;
var obj={
     c:10,
     a:this.c,//this--->window
     //此时this指向上下文环境中this的指向
     //此时的上下文环境是obj的外面，所以指向window
     b:function(){
          console.log(this.a);//this--->obj   输出20
     }
}
obj.b();

4.this---->函数中的arguments

在函数中使用回调函数时，
利用arguments的参数来执行回调函数，
被执行的回调函数中this指向的是当前函数arguments.callee.caller函数的arguments

var a;
function fn(){
     console.log(this===a);//fn中的this是fn1中的arguments
}
function fn1(f){
     a=arguments;
     arguments[0]();
}

5.事件中的this---->事件侦听的对象 e.currentTarget

document.addEventListener("click",clickHandler);
function clickHandler(e){
     console.log(this);//this--->document
}

6.this被call，apply和bind重新指定对应的对象

function fn(){
     console.log(this);
}
fn.call({a:1});//this--->{a:1}
fn.apply({a:1});//this--->{a:1}
fn.bind({a:1})();//this--->{a:1}

7.对象函数中的this---->当前对象

var obj={
      a:1,
      b:function(){
           console.log(this);//this--->当前对象obj
      }
}

8.ES6类中this

class Box{
     constructor(){
          console.log("aaa");
     }
     // 实例化方法，在实例化方法中或者构造函数中调用的this都是当前类的实例化的对象
     play(){
          console.log(this);//this是当前类实例化的对象
     }
     // 静态方法中，this就是当前类名或者当前类的构造函数
     static run(){
          console.log(this);//this是当前类(Box)也是构造函数(constructor)
          console.log("aaaa");
     }
}



console.log(Box);//这个Box是类也是函数
//当直接调用时,Box指的是类
new  Box();//执行构造函数 Box就是类里面的constructor
var b=new Box();
b.constructor.run();// 等同于Box.run();
Box.run();
console.log(b.constructor)//只有实例化对象才有属性是constructor
console.log(b.constructor===Box);//true

9.ES5 类中的this

function Box(){
      // console.log("aaa");
      // this   通过new 实例当前Box时，this就是当前实例化的对象
      // this  如果直接调用函数，this就是window或者undefined(严格模式)
      if(!(this instanceof Box)){
            return new Box();//当直接调用函数时，this指向window,此时this不是Box类型，则重新new Box()
      }
}
// 相当于ES6类中实例化方法
Box.prototype.play=function(){
      console.log(this);//实例化的对象
}
// 相当于ES6中的静态方法
Box.run=function(){
      console.log(this);//就是当前类
}
// Box是类也是构造函数
var b=new Box();//当执行实例Box时会执行Box函数，并且自动返回实例化Box的一个元素
var c=Box();//在ES5中如果不使用new来执行构造函数，构造函数自身也是可以独自执行，但是不能返回实例化对象
console.log(b,c);

此时，this的所有情况我们就学完了，那我出道题考考大家

var obj = {
        a: 10,
        abc: function () {
          setTimeout(() => {
            this.a++;
            console.log(this.a);//11
            (function () {
              this.a++;
              console.log(this.a);//21
            }.call(this.c));
          }, 1000);
        },
        c: {
          a: 20,
        },
};
obj.abc();