什么时候不该用箭头函数？这五种情况要注意

原文链接：https://mp.weixin.qq.com/s/kVM43DGuqkhUUvg0q_8zmg

ES6 引入箭头函数后，很多开发者喜欢上了它简洁的写法。箭头函数用起来方便，还能避免一些 this 指向问题。

但并不是所有地方都适合用箭头函数。有时候用了反而会出错，特别是下面这五种情况。

简单来说，箭头函数和普通函数最大的区别在于 this 的指向：

• 普通函数的 this 是谁调用就指向谁

• 箭头函数的 this 是定义时就固定了，不会改变

理解了这一点，你就知道为什么下面这些场景必须用普通函数了。

1. 对象中的方法

当我们给对象定义方法时，通常希望方法内部的 this 指向这个对象本身，这样才能访问对象的其他属性。

错误写法（用箭头函数）：

const person = {
name: "小明",
introduce: () => {
console.log(`我是${this.name}`); // 这里 this 不是 person
  }
};
person.introduce(); // 输出：我是undefined

正确写法（用普通函数）：

const person = {
name: "小明",
introduce: function() {
console.log(`我是${this.name}`);
  }
};
person.introduce(); // 输出：我是小明

也可以用 ES6 的方法简写：

const person = {
name: "小明",
  introduce() {
console.log(`我是${this.name}`);
  }
};

 

2. 事件处理函数

给 dom 元素添加事件监听时，我们经常需要操作触发事件的元素本身。普通函数会自动把 this 绑定到当前元素上。

错误写法（用箭头函数）：

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
this.classList.add("active"); // 这里 this 不是按钮元素
});

正确写法（用普通函数）：

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
this.classList.add("active"); // this 就是被点击的按钮
});

 

3. 构造函数

箭头函数不能用作构造函数，尝试用 new 调用会直接报错。

错误写法：

const Person = (name) => {
this.name = name; // 这里会报错
};
const p = new Person("小明"); // 报错：Person is not a constructor

正确写法（用普通函数）：

functionPerson(name) {
this.name = name;
}
const p = new Person("小明");
console.log(p.name); // 输出：小明

也可以用 class 语法：

classPerson{
constructor(name) {
this.name = name;
  }
}

 

4. 原型方法

在原型上定义方法时，也需要让 this 指向实例对象。

错误写法：

functionPerson(name) {
this.name = name;
}
Person.prototype.sayName = () => {
console.log(this.name); // this 不是实例
};
const p = new Person("小明");
p.sayName(); // 输出：undefined

正确写法：

functionPerson(name) {
this.name = name;
}
Person.prototype.sayName = function() {
console.log(this.name); // this 指向实例
};
const p = new Person("小明");
p.sayName(); // 输出：小明

 

5. 需要使用 arguments 对象的函数

箭头函数没有自己的 arguments 对象，如果需要使用 arguments，必须用普通函数。

错误写法：

constfunc = () => {
  console.log(arguments); // 报错：arguments is not defined
};
func(1, 2, 3);

正确写法：

function func() {
  console.log(arguments); // 正常输出参数列表
}
func(1, 2, 3);

不过现在更推荐使用剩余参数语法，箭头函数也能用：

constfunc = (...args) => {
  console.log(args); // 输出：[1, 2, 3]
};
func(1, 2, 3);

 

那么什么时候该用箭头函数？

箭头函数最适合用在需要保持 this 指向不变的场景，比如回调函数：

const counter = {
  count: 0,
  start() {
setInterval(() => {
this.count++; // 这里的 this 指向 counter
console.log(this.count);
    }, 1000);
  }
};
counter.start();

在数组方法中也很方便：

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

 

总结一下：箭头函数很好用，但不能滥用。在需要动态 this 的场景下，还是得用普通函数。掌握两者的区别，才能写出更可靠的代码。