箭头函数与胖箭头函数

Question

我在互联网上找到了这两个名称，箭头函数和粗箭头函数，但没有关于它们之间有什么区别的信息。

有什么不同吗？

Answer 1

这样的问题需要解释一下……

ECMAScript 5

在 ES5 规范中，根本没有 箭头函数。那时使用传统的函数表达式很常见，如下所示：

// Example n°1
var myFunction = function () {
  return 'Hello!';
};

// Example n°2
var obj = {
  myFunction: function () {
    return 'Hello!';
  }
};

// Example n°3
var arr = ['foo', 'bar'];
arr.map(function (item) {
  return 'Hello, ' + item + '!';
};

咖啡脚本

Jeremy Ashkenas 介绍 CoffeeScript 时，它带来了一个新术语，尤其是细箭头函数 (->) 和粗箭头函数 (=>)。

一方面，细箭头函数 是 ES5（匿名）函数表达式的 CoffeeScript 等价物。在 CoffeeScript 中，我们可以这样写前面的例子：

# Example n°1
myFunction = -> 'Hello!'

# Example n°2
obj =
  myFunction: -> 'Hello!'

# Example n°3
arr = ['foo', 'bar']
arr.map((item) -> "Hello, #{item}!")

另一方面，胖箭头函数是 CoffeeScript 提供的一个不错的实用程序，它在 ES5 中没有等效的语法。它的目的是更轻松地使用词法作用域，尤其是当您想将外部 this 保留在回调中时。让我们用 CoffeeScript 和传说中的 jQuery 回调来举一个通用的例子。假设我们在全局范围内：

// Here "this" is "window"
console.log(this);

$(document).ready(function () {
  // Here "this" is "document"
  console.log(this);
});

如果我们想在回调中操作外部的“this”，这里是 ES5 代码：

var that = this;

$(document).ready(function () {
  console.log(that);
});

使用 CoffeeScript，可以使用 胖箭头函数：

// "this" is "window"!
$(document).ready => console.log this

当然，它不适用于细箭头函数：

// "this" is "document"
$(document).ready -> console.log this

ECMAScript 6 (2015)

ES2015 规范引入了箭头函数。它们是 CoffeeScript 中 胖箭头函数 的替代品。但是由于 ES6 中没有 细箭头函数，所以当你不使用 CoffeeScript 时，没有理由谈论粗箭头函数。在 ES6 中，你会这样做：

// Here "this" is "window"
$(document).ready(() => console.log(this));

现在，如果您想保留词法作用域的正常行为，只需使用 ES5 语法：

$(document).ready(function () {
  // Here "this" is "document"
  console.log(this);
});

Answer 2

有什么不同吗？

没有。

除了术语“胖箭头函数”已被弃用和过时。

此答案不适用于 CoffeeScript，以防有人仍在使用它。

Answer 3

在 CoffeeScript 中，胖箭头函数在封装范围内传递，而普通箭头则不传递。