アロー関数 => 通常の関数のどこが間違っているのでしょうか?

通常のもののどこが間違っていますか?" />

JavaScript の知識が深まり、なぜ が ECMAScript 2015 (ES6) にアロー関数を追加するのか疑問に思っているのは、あなただけではありません。この言語とその複雑さと癖についての知識を深めていくうちに、私も同じことを疑問に思っていることに気づきました。この投稿では、違い、利点、追加された理由、いつ使用する必要があるかを説明します。

違いについて話しましょう

アロー関数が導入される前は、関数は次のような従来の形式で宣言する必要がありました。

function add(x, y) {
  return x + y;
}

または式として宣言されます:

const addFunction = function add(x, y) {
  return x + y;
}

アロー関数の導入により、これは次のように記述できます。

const addFunction = (x,y) => x + y

簡潔な構文

上記の例から、アロー関数を使用し、その暗黙的な戻り機能を活用することで、関数を 1 行にすばやくリファクタリングできることが簡単にわかります。結果として得られるコードは、より簡潔でクリーンで読みやすくなり、開発がよりスムーズになり、デバッグが高速化されます。

巻き上げ

JavaScript ランタイムはデフォルトで、実行コンテキストの作成時にすべての関数と変数宣言をスコープの先頭にホイストします。たとえば、グローバル スコープ内では、これにより、宣言されたすべての関数と変数が、後で呼び出されるすべての関数で使用できるようになります。ただし、アロー関数は決してホイストされないため、関数が実行される正確な場所とアクセスできる変数をより詳細に制御できます。

コンテクスト

JavaScript 関数が実行されるたびに、this の値など、関数が実行されている環境に関する情報を含む実行コンテキストが作成されます。従来の関数は独自のコンテキストで実行されますが、アロー関数は常にそれを呼び出した関数のコンテキストを継承します。
以下のコードを使用します:

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

「未定義のプロパティ 'forEach' を読み取れません」というエラーが表示されます。これは、printGreetings 関数が Person クラスのコンテキスト内にあり、そのコンテキストを継承しているにもかかわらず、forEach 関数 (たとえ組み込みの JavaScript 関数) は、this.name プロパティを含まない独自のコンテキストで実行されるため、検索が行われます。エラー。

ただし、アロー関数は独自のコンテキストで実行されることはなく、アロー関数を使用して上記の関数を書き直すと...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

結果は期待どおりになります

function add(x, y) {
  return x + y;
}

まとめ

アロー関数の利点を要約すると、より短く簡潔なコードが可能になります。関数ブロック コードの暗黙的なリターンを提供します。実行コンテキストの先頭にホイストせず、コード内の正確な位置を維持します。最後に、独自のコンテキストを実行せずに、呼び出した関数のコンテキストを継承するため、このキーワードをより予測しやすく使用できるようになります。

この投稿が、従来の関数とアロー関数の違いと利点をより深く理解し、JavaScript の旅をさらに一歩進めるきっかけになれば幸いです!

さらに読む:
Dmitri Pavlutin ブログ - アロー関数と通常の関数の違い
MDN リファレンス ドキュメント - アロー関数

以上がアロー関数 => 通常の関数のどこが間違っているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。