JavaScript中this指向的十种情况

1.this----->undefined
ES6的严格模式中，日过调用函数中的this或者顶层this将会指向undefined；

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

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

        var c=20;
        var obj={
            c:10,
            a:this.c,
            b:function(){
                console.log(this.a)
            }
        }
        obj.b();
打印结果为20

        var a = 100;
        var obj = {
            a: 10,
            c: 50,
            b: {
                a: 0,
                c: this.a,
                run: function () {
                    console.log(this.c);
                }
            }
        }

        obj.b.run();
        打印结果为100

4.this —>document

          var obj={
              a:10,
              c:50,
              b:{
                  a:0,
                  c:this.a,
                  run:function(){
                      console.log(this.c);
                  }
              }
          }
          obj.b.run();
      }

5.this----->函数中的arguments
在函数中使用回调函数时，利用arguments的参数来执行回调函数，被执行的回调函数中this指向的是当前函数arguments.callee,.caller的arguments；
例一：

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

例二：

        var o = {
            a: function () {
                console.log(this);
            },
            b: function (f) {
                arguments[0]();
            },
            c: function () {
                this.b(this.a)
            }
        }
        o.c();

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

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

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

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

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

9.ES6类中this----->实例化对象

      class Box{
          constructor(){
              console.log("aaa");
          }
          // 实例化方法，在实例化方法中或者构造函数中调用的this都是当前类的实例化的对象
          play(){
              console.log(this);//this是当前类实例化的对象
          }
          // 静态方法中，this就是当前类名或者当前类的构造函数
          static run(){
              console.log(this);//this是当前类也是构造函数
              console.log("aaaa");
          }
      }
        // console.log(Box); //这个Box是类也是函数
        // 当直接调用是指的是类
        // new Box(); //执行构造函数 Box就是类里面的constructor
        // var b = new Box();
        // b.constructor.run();
        // Box.run();
        // console.log(b.constructor) //只有实例化对象才有属性是constructor
        // console.log(b.constructor === Box);

        // 在ES5或者ES6中，类仅允许有且仅有一个构造函数，并且该函数的名称和类名相同
        // 在ES6中会将构造函数描述成constructor
        // 在ES5中会将构造函数写出类名
        // 但是不管是ES5还是ES6，实例化对象的constructor都是构造函数，
        // 构造函数中不允许return

10.ES5类中的this

          function Box(){
              // console.log("aaa");
              // this   通过new 实例当前Box时，this就是当前实例化的对象
              // this  如果直接调用函数，this就是window或者undefined(严格模式)
              if(!(this instanceof Box)){
                  return 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);