JS中this关键字详解

首先，必须搞清楚在JS里面，函数的几种调用方式:

• 普通函数调用

• 作为方法来调用

• 作为构造函数来调用

• 使用apply/call方法来调用

• Function.prototype.bind方法

• es6箭头函数

但是不管函数是按哪种方法来调用的，请记住一点：谁调用这个函数或方法,this关键字就指向谁。

普通函数调用

 function person(){
         this.name="xl";
         console.log(this);
         console.log(this.name);
     }
     
     person();  //输出  window  xl   


在这段代码中person函数作为普通函数调用，
实际上person是作为全局对象window的一个方法来进行调用的,
即window.person();
所以这个地方是window对象调用了person方法,
那么person函数当中的this即指window,
同时window还拥有了另外一个属性name,值为xl.


var name="xl";
     function person(){
         console.log(this.name);
     }
     person(); //输出 xl
同样这个地方person作为window的方法来调用，
在代码的一开始定义了一个全局变量name，值为xl,它相当于window的一个属性,
即window.name="xl",
又因为在调用person的时候this是指向window的，
因此这里会输出xl.

普通函数的调用即是作为window对象的方法进行调用。显然this关键字指向了window对象.

作为方法来调用

 var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    person.showName();  //输出  xl
   这里是person对象调用showName方法，很显然this关键字是指向person对象的，所以会输出name
    


    var showNameA=person.showName;
    showNameA();    //输出  XL
    这里将person.showName方法赋给showNameA变量，
此时showNameA变量相当于window对象的一个属性，
因此showNameA()执行的时候相当于window.showNameA(),
即window对象调用showNameA这个方法，所以this关键字指向window


var personA={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    var personB={
        name:"XL",
        sayName:personA.showName
    }
    
    personB.sayName();  //输出 XL
    虽然showName方法是在personA这个对象中定义，
但是调用的时候却是在personB这个对象中调用，因此this对象指向personB

作为构造函数来调用