Vue基础教程（24）ECMAScript 6语法之箭头函数：别再用普通函数了！Vue中的箭头函数让你爽到飞起——但这些坑你必须知道！

一、 先来个灵魂拷问：你被this坑过多少回？

还记得刚学JavaScript时被this支配的恐惧吗？看看这段让人血压升高的代码：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick: function() {
      setInterval(function() {
        console.log(this.count) // 输出undefined？！
      }, 1000)
    }
  }
}

是不是熟悉的配方？传统函数里的this像极了青春期的孩子——永远猜不透它想去哪儿！这时候老司机们不得不祭出大杀器：

// 方案1：that大法
handleClick: function() {
  const that = this
  setInterval(function() {
    console.log(that.count) // 勉强能用但丑爆了
  }, 1000)
}

// 方案2：bind强行绑架
handleClick: function() {
  setInterval(function() {
    console.log(this.count)
  }.bind(this), 1000) // 代码像裹脚布又臭又长
}

直到ES6箭头函数横空出世，这一切才迎来转机！

二、 箭头函数是何方神圣？比奶茶还让人上瘾！

2.1 极致简洁的语法糖

普通函数写个加法要这么啰嗦：

const sum = function(a, b) {
  return a + b
}