JS 箭头函数 vs 函数

在 JavaScript 中，函数是非常常用的一种语法结构。而随着 ES6 的到来，一种新的函数形式 - 箭头函数出现了，那么箭头函数和普通函数又有什么区别呢？

区别

语法

普通函数的语法：

function sum(a, b) {
  return a + b;
}

而箭头函数的语法则更为简洁明了：

const sum = (a, b) => a + b;

可以看到，箭头函数语法省去了 function 关键字，并且当存在多个参数时，需要用小括号括起来；当函数主体只有一行时，可以省去 return 关键字，并且连花括号 {} 也不需要。

this 指向

普通函数中的 this 是一个运行时决定的值，可以在函数内通过 this 关键字来获取。而箭头函数中的 this 是继承自外面的，也就是说箭头函数的 this 值指向的是定义时所在的对象。

var obj = {
  name: "hello",
  sayName: function() {
    console.log(this.name);
  },
  sayNameWithArrow: () => console.log(this.name)
};

obj.sayName(); // 输出 "hello"
obj.sayNameWithArrow(); // 输出 undefined

可以看到，在 sayName 函数中，this 值是 obj，而在 sayNameWithArrow 箭头函数中，this 指向的是外层作用域的 this，即全局对象。

适用场景

箭头函数相对于普通函数来说，函数体内的 this 指向固定、语法更简洁。因此在写纯计算的函数或者简单的回调函数时，通常可以优先考虑使用箭头函数。

但需要注意的是，如果需要在函数体内使用 arguments，或者需要动态绑定 this，则需要使用普通函数。

总结

箭头函数相对于普通函数语法更为简洁，但并不是所有的场景都适用，需要根据具体情况做出选择。

最后，对于新手来说，学会普通函数的使用也是非常重要的，毕竟箭头函数是在 ES6 之后才出现的。