箭头函数 vs 胖箭头函数

Question

我在互联网上找到了关于这两个名称的信息，arrow functions 和 fat arrow functions 但没有关于它们之间区别的信息他们。

有什么不同吗？

Answer 1

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

Answer 2

Are there any differences?

没有

除了术语 "fat arrow function" 已被弃用和过时。

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

Answer 3

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

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 + '!';
};

CoffeeScript

当 Jeremy Ashkenas 引入 CoffeeScript 时，它带来了一个新术语，尤其是 thin arrow functions (->) 和 fat arrow functions (=>).

一方面，细箭头函数 是 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 中 fat arrow functions 的替代方法。但是既然 ES6 中没有 thin arrow functions ，不使用 CoffeeScript 就没有理由谈论 fat arrow functions 。在 ES6 中，你会这样做：

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

现在如果你想保留词法范围的正常行为，只需使用 ES5 语法：

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

箭头函数 vs 胖箭头函数

Arrow functions vs Fat arrow functions

javascript

ecmascript-6

arrow-functions

ECMAScript 5

CoffeeScript

ECMAScript 6 (2015)