this指向问题及其运用（详解）

this 指向

1.普通函数中的this指向

• ES5中函数的this指向

  ES5非严格模式下，全局的this和函数的this都指向window，函数中的this指向undefined

• ES6函数中this

  和ES5下的严格模式一样，全局的this和函数的this都指向window，函数中的this指向undefined

2.对象中的this指向

​ 接下来以案例解释

var obj={
            a:1,
            b:function(){
				console.log(this);//this不会因为变量引用改变而改变
                //this指向当前对象自身obj
            },
            c:this.a
            //该this就指向对象外的指向，因为对象还没创建完成时，this还没生成，this就指向对象外this的指向
        }
 var o=obj;
	o.b();

3.回调函数中的this指向

 var obj = {
        a: function () {
            var self=this;
            console.log(self);
            function fn1(fn) {
                // fn();
                // arguments[0]();
                fn.call(self);
            }
            function fn2() {
                console.log(this);//window (回调函数中)
                //1、如果直接指向的回调函数，this指向最外层window
                //2、如果通过arguments直接使用参数指向函数，this则指向执行当前函数的arguments
                //3、如果回调函数通过call，apply,bind重新指向了新的对象时，this就是新对象
                
            }
            fn1(fn2);
        },
      };

      obj.a();

//计时器也是回调函数的一种，同理

4、事件中this

 var obj={
          b:1,
          a:function(){
            //   特殊的回调函数
              document.addEventListener("click",this.clickHandler);
          },
          clickHandler:function(e){
                console.log(this);//事件侦听的对象 e.currentTarget
          } 
      } 

 var obj={
          b:1,
          a:function(){
            //   console.log(this);
            //   特殊的回调函数
            document.addEventListener("click",this.clickHandler);
            //   document.attachEvent("onclick",this.clickHandler);
          },
          clickHandler:function(e){
                // console.log(this===document);//addEventListener事件侦听的对象 e.currentTarget
                // console.log(this===window);//IE8 attachEvent侦听事件时，this指向window
          } 
      } 
      obj.a(); 

5、ES6中类的指向

// ES6类
       class Box{
          static _instance;
          constructor(){
              console.log(this);//指向被实例化的对象
           }
           static getInstance(){
               if(!Box._instance){
                   Box._instance=new Box();
              }
               return Box._instance;
           }
           play(){
               console.log(this,"|");//指向被实例化的对象
           }
           static run(){
                console.log(this);
                console.log(this===Box,"____");
               // this就是当前类名也是构造函数
               // 任何的静态方法中this都是当前类
               // 静态方法中无法获取到实例化对象的this的
              return this;
           }
           
           var b=new Box();//会执行构造函数，这是构造函数中this就是这个b对象
      	   b.play();//b对象下的方法play，因此play方法中this被指向b，谁执行play，this指向谁

6、ES5 中类的指向

// ES5 面向对象中的this
       function Box(){
           console.log(this);
       }
       Box.prototype.play=function(){
           console.log(this);//this是指向执行该方法的实例化对象
       }

       Box.run=function(){
           console.log(this);//Box
       }

      Box();//未实例化之前，this是window或者undefined
      var b=new Box();// this是实例化后b对象
      b.play();

7、箭头函数

var obj = {
        a: function () {
          setTimeout(() => {
            console.log(this);//this是箭头函数外this的指向,在这里是a
            // 上下文环境中this的指向
          }, 2000);
        },
      };
      obj.a();

    var obj={
            a:function(){
                document.addEventListener("click",this.clicHandler);
            },
            clicHandler:function(e){
                setTimeout(()=>{
                    console.log(this);
                },2000);
            }
        }
        obj.a();//#document

8、call apply bind

    fn.call(obj);//fn中this指向obj
    fn.apply(obj);//fn中this 指向obj
    fn.bind(obj)();//fn中this指向obj

    var obj={
             a:function(){
                 function fn(){
                     console.log(this);
               }
               fn();
              console.log(this);//window 如果是call apply bind 带入的是null，将会把这里的this重新指向window
             }
         }
    	obj.a();//window
         obj.a.call(null);//window