アロー関数の形式

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6 箭头函数
var selected = allJobs.filter(job => job.isSelected());

// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

ログイン後にコピー

1. 複数のパラメーター (またはパラメーターなし、デフォルト値、または構造化されていないパラメーター) を含む関数を作成するには、パラメーターリストをかっこで囲みます。
2. ブロックを含むアロー関数は自動的に値を返しません。 return ステートメントを使用してください。
3. アロー関数を使用して通常のオブジェクトを作成する場合、注意すべきことが 1 つあります。オブジェクトは常に括弧で囲みます:

this は

を指します。アロー関数には独自の this 値がありません。このアロー関数内の値は、常に外側のスコープから継承されます。

object.method() 構文を使用して呼び出されるメソッドの場合は、アロー以外の関数を使用してください。これらの関数は、呼び出し元から意味のある this 値を取得します。それ以外はすべてアロー関数を使用します。

{
  ...
  addAll: function addAll(pieces) {
    var self = this;
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

// ES6
{
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

ログイン後にコピー

アロー関数と通常の関数の違い

アロー関数とアロー以外の関数の間には、もう 1 つの小さな違いがあります。それは、アロー関数には独自の引数オブジェクトがありません。

通常の関数:
1. 関数がグローバル関数として呼び出される場合、this はグローバルオブジェクトを指します
2. 関数がオブジェクト内のメソッドとして呼び出される場合、this はオブジェクトを指します
3.はコンストラクターとして使用され、this は関数 new からの新しいオブジェクトを指します
4。this の方向は、call、apply、bind によって変更することもできます

1。アロー関数には this がありません。関数内の関数は、親の最も近い非矢印関数から来ており、この方向は変更できません。
2. アロー関数には super がありません
3. アロー関数には引数がありません
4. アロー関数には new.target バインディングがありません。
5. 新しいものは使用できません。
6. プロトタイプはありません。
7. 重複した名前付きパラメータはサポートされません。