面试时候总会被问this的指向问题,之前未对其进行深入的研究,总会被问的一脸蒙蔽。
最近沉迷于考证,闲下来对this的指向进行相应的研究,使自己可以劳逸结合。
普通函数 this指向window 对应的箭头函数 this指向window
function common(){
console.log(this); // window
}
common();
var commonArrow = ()=>{
console.log(this); // window
}
commonArrow();
构造函数 this指向实例 对应的箭头函数 this会报typeError
function Animal(name){
this.name = name;
}
var constructor = new Animal('Lemon');
console.log(constructor)
const AnimalArrow = (name)=>{
this.name = name;
}
var constructorArrow = new AnimalArrow('Demon');
console.log(constructorArrow) //Uncaught TypeError: AnimalArrow is not a constructor
对象方法
普通对象方法 this指向对象 对应的箭头函数 this指向window
var name = "window"; var obj = { name:"outer var", sayName : function(){ return this.name; } } console.log(obj.sayName()); // outer var var name = "window"; var objArrow = { name:"outer var", sayName : ()=>{ return this.name; } } console.log(objArrow.sayName()); // window
对象方法中内嵌闭包 this指向window 对应的箭头函数 this指向对象
var name = "window";
var obj = {
name:"outer var",
sayName : function(){
console.log(this); // this指向对象
var name = "inner var";
return function(){
console.log(this) // 闭包 this指向全局对象window
return this.name;
}
}
}
console.log(obj.sayName()()) // window
注:改变this指向,call/apply或者外部函数定义变量指向当前对象
var name = "window";
var objArrow = {
name:"outer var",
sayName : function(){
var name = "inner var";
return ()=> this.name; // this 指向对象
}
}
console.log(objArrow.sayName()()) // outer var
注:箭头函数本身无this,需沿着作用域链网上找,直至找到全局对象window。
故而当前的父级函数也是箭头函数时,应继续往上找。
普通函数在函数运行时,this才会指向调用的对象,找不到宿主则是window;
箭头函数在定义时就明确了this的指向,this继承的是父级函数的this。