首先,必须搞清楚在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
作为构造函数来调用