箭头函数 vs 胖箭头函数 [英] Arrow functions vs Fat arrow functions

问题描述

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

I've found on the internet about both names, arrow functions and fat arrow functions but no information about what is different between them.

有什么不同吗?

推荐答案

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

Such a question requires a bit of explanation...

在 ES5 规范中，根本没有箭头函数.那时使用像这样的传统函数表达式很常见:

In ES5 specification, there were no arrow functions at all. It was then common to use traditional function expressions like so:

// 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 时，它带来了一个新术语，尤其是细箭头函数(->)和粗箭头函数 (=>).

一方面，细箭头函数是等效于 ES5(匿名)函数表达式的 CoffeeScript.在 CoffeeScript 中，我们可以像这样编写前面的例子:

On the one hand, the thin arrow function is a CoffeeScript equivalent of the ES5 (anonymous) function expression. In CoffeeScript, we could write the previous examples like so:

# 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 回调来举一个通用的例子.假设我们在全局范围内:

On the other hand, the fat arrow function is a nice utility provided by CoffeeScript which has no equivalent syntax in ES5. Its aim is to play more easily with lexical scoping, especially when you want to keep the outer this in a callback. Let's take a universal example with CoffeeScript and the legendary jQuery callback. Suppose we are in the global scope:

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

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

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

If we want to manipulate the outer "this" in the callback, here is the ES5 code:

var that = this;

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

使用 CoffeeScript，可以使用粗箭头函数代替:

With CoffeeScript, it is possible to use a fat arrow function instead:

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

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

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

ECMAScript 6 (2015)

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

ECMAScript 6 (2015)

ES2015 specification introduced arrow functions. They are an alternative to fat arrow functions in CoffeeScript. But since there are no thin arrow functions in ES6, there is no reason to talk about fat arrow functions when you do not use CoffeeScript. In ES6, you would do this:

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

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

Now if you want to preserve the normal behavior of lexical scoping, just use the ES5 syntax:

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

这篇关于箭头函数 vs 胖箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！