各位小伙伴，欢迎来到“用ES6让代码起飞”系列博客的第2篇！这个系列博客的初衷是帮助大家深入理解ES6的所有知识点，让大家的代码更加简洁优雅，编程生活更加愉快。
每篇博客我会分享1个ES6的知识点，并通过生动有趣的代码片段帮助你们轻松掌握。准备好了吗？让我们从第1个知识点开始吧！

第二期：用箭头函数让this不再抓狂

this的问题

还记得我们曾经为了搞清楚this指向谁而绞尽脑汁吗？尤其是在嵌套函数或者回调函数中，this的指向简直让人抓狂。

普通函数的this指向

先来看看在普通函数中，this是如何让人困惑的：

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
    console.log(this.age);
  }, 1000);
}

const p1 = new Person(); // NaN, NaN, NaN...

解释： 在上面的例子中，setInterval内的this指向的是全局对象（在浏览器中是window），而不是Person实例，所以this.age实际上是undefined，每次++操作后得到的都是NaN。

箭头函数的神奇魔力

优化普通函数this指向

现在，让我们用箭头函数来改进一下：

function PersonES6() {
  this.age = 0;

  setInterval(() => {
    this.age++;
    console.log(this.age);
  }, 1000);
}

const p2 = new PersonES6(); // 1, 2, 3...

解释： 箭头函数不会创建自己的this，它会捕获上下文中的this值，也就是说箭头函数中的this保持与外部PersonES6函数一致，因此可以正确访问到实例的age属性。

箭头函数的其他好处

除了固定this指向，箭头函数还有其他优点，例如简洁的语法。

// 普通函数
const add = function(a, b) {
  return a + b;
};

// 箭头函数
const addES6 = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(addES6(2, 3)); // 5

解释： 使用箭头函数后，代码更加简洁易读。

如果函数体只有一行语句并且直接返回结果，可以省略大括号和return关键字。

结语

在今天的博客中，我们介绍了箭头函数以及它如何抚慰我们被this伤透的心灵。通过使用箭头函数，我们可以避免this指向混乱的问题，并且让代码更加简洁明了。

我是前端霸哥，愿你的代码中没有bug
写的不好的地方，欢迎各位小伙伴批评指正