web-dev-qa-db-ja.com

矢印関数と太い矢印関数

矢印関数と太い矢印関数の両方の名前についてインターネットで見つけましたが、それらの違いについての情報はありません。

違いはありますか？

javascriptecmascript-6arrow-functions
15
Samurai Jack

そのような質問には少し説明が必要です...

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

CoffeeScriptがJeremyAshkenasによって導入されたとき、それは新しい用語、特に細い矢印関数（->）および太い矢印関数（=>）。

一方では、細い矢印関数は、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}!")

一方、太い矢印関数は、ES5に同等の構文がないCoffeeScriptによって提供されるNiceユーティリティです。その目的は、特にコールバックで外側の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);
});
24
Badacadabra

違いはありますか？

番号

「ファットアロー機能」という用語が廃止され、廃止されたことを除いて。

誰かがまだそれを使用している場合、この答えはCoffeeScriptには適用されません。

6
user663031

CoffeeScriptでは、太い矢印関数はカプセル化スコープを通過しますが、通常の矢印は通過しません。

2
Mickers