jsのアロー関数の書式＆これと普通の関数との違いを解説

この記事では、js のアロー関数の形式と一般的な関数との違いについて説明します。必要な方は参考にしていただければ幸いです。

アロー関数の形式

// 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. 重複した名前付きパラメータはサポートされません。

関連する推奨事項:

ES6 アロー関数でのこの質問への回答

JavaScript アロー関数の詳細な説明

以上がjsのアロー関数の書式＆これと普通の関数との違いを解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。