最近看Lucas老师的系列文章,这段总结拿来学习学习。
首先,箭头函数来对 this 指向进行干预,那么反过来说,“不需要进行 this 指向干预的情况下,我们就不适合使用箭头函数”。总结下来,有:
- 构造函数的原型方法上
构造函数的原型方法需要通过this获得实例,因此箭头函数不可以出现在构造函数的原型方法上:
function Person(name){
this.name = name;
this.a = 'A'
}
Person.prototype.sayName = function(){
console.log(this)//指向Person
}
//如果使用箭头函数
Person.prototype.sayName = () => {
console.log(this)//指向Window ---显然 这样的做法是错误的。
}
let mike = new Person('Mike');
mike.sayName();
- 需要获得 arguments 时
箭头函数不具有 arguments,因此在其函数体内无法访问这一特殊的伪数组,那么相关场景下也不适合使用箭头函数。
function args(){
console.log(arguments);//Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
args(1,2,3,4);
let args1 = ()=>{
console.log(arguments);// 报错:Uncaught ReferenceError: arguments is not defined
}
args1('a','b','c');
- 使用对象方法时
const person = {
name: 'lucas',
getName: () => {
console.log(this.name)//this指向Window ---显然 这样的做法是错误的。
}
};
person.getName()
- 使用动态回调时
类似下面这种对回调函数的 this 有特殊场景需求的用法,箭头函数的 this 无法满足要求,事件绑定函数的 this 指向了 window,而无法获取事件对象。
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
console.log(this === window)//true,不符合预期(指向每次点击的btn元素)
});
以上总结,为常见不适用箭头函数场景。