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.

Are there any differences?

回答1:

Such a question requires a bit of explanation...

ECMAScript 5

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

When CoffeeScript was introduced by Jeremy Ashkenas, it brought a new terminology, especially thin arrow functions (->) and fat arrow functions (=>).

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}!")

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);
});

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);
});

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

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

Of course, it would not work with a thin arrow function:

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

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));

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);
});

回答2:

Are there any differences?

No.

Except that the term "fat arrow function" is deprecated and obsolete.

This answer does not apply to CoffeeScript, in case anybody is still using that.

回答3:

In CoffeeScript fat arrow functions pass in the encapsulating scope whilst normal arrow don't.

来源：https://stackoverflow.com/questions/43588722/arrow-functions-vs-fat-arrow-functions

标签

javascript

ecmascript-6

arrow-functions