#1.在普通函数中,this的指向问题,首先我们需要明白,函数调用时,是由解析器调用的.
,上面这段话也就直接说明了,函数调用的方式不同,this的指向不同
下面我用代码来进行解释我所说的。
代码举例:
//1.
function fn(){
console.log(this); //打印结果是window,但是实际上我们并没有传值给fn函数this
//也就是说,this是解析器自动传的,又因为函数在全局调用,所以
//this的指向是全局,也就是window
}
//fn();
//2.
var test= {
name:"asda",
sayName:fn
}
test.sayName(); //此时打印的结果是object,原因是,fn函数是由test对象调用,
//也就是使用方法的形式调用,由于test是一个对象,所以this指向这个对象
//所以打印结果是object
#2.在箭头函数中,this的指向,先说结论:箭头函数中的this指向,引用的是最近作用域中的this。 更直接的理解就是:箭头函数中的this指向就是距离箭头函数最近一层的作用域中的this对象。
下面我直接用代码来做解释;
//1.如果感觉不够清晰,可以看2
var fn={
aaa(){
//普通函数写法
setTimeout(function (){
console.log(this) //此时打印window对象,没问题
}),
//箭头函数写法
setTimeout(()=>{
console.log(this); //此时打印object,原因,箭头函数中的this指向的是离它最近的一层作用域
//此时箭头函数的上层作用域是fn对象,所以打印结果应该是object
})
}
}
fn.aaa();
//2.
var obj = {
id: 42,
counter: function counter() {
setTimeout( function() {
id=123;
console.log(this.id); //此时打印结果是123
}, 1000),
//箭头函数写法
setTimeout(() => {
id=123;
console.log(this.id); //此时打印结果是42,不是123的原因,
//是因为当前的this指向的是obj对象的作用域,不是conter
}, 1000);
}
};
obj.counter();