JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの通常関数とアロー関数の違いを徹底解説！thisとnewキーワードの挙動

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

アロー関数は、コードをより簡潔に記述するために用意された構文です。通常関数とアロー関数はどちらもほぼ同じように動作しますが、いくつかの重要な違いがあります。本記事では、それぞれの構文の違いに加えて、thisキーワードやnewキーワードの扱いについて、具体例を挙げながらわかりやすく解説します。

アロー関数の構文

let x = (params) => {
// コード
};

通常関数の構文

let x = function functionname(params){
// コード
};

thisキーワードの挙動の違い

アロー関数は自身のthisを持ちません。そのため、オブジェクトのメソッドとしてアロー関数を定義しても、thisはそのオブジェクトを参照せず、外側のスコープのthisを引き継ぎます。一方、通常関数ではthisが呼び出し元のオブジェクトを正しく参照するため、意図したとおりに利用できます。

サンプルコード

次の例では、len（長さ）とbre（幅）というプロパティを持つオブジェクト「num」の中に、アロー関数（square：正方形）と通常関数（rectangle：長方形）を定義しています。アロー関数で正方形の面積（len × len）を、通常関数で長方形の面積（len × bre）を求めるのが狙いです。しかし、アロー関数内ではthisが期待どおりに機能しないため、正方形の面積は「NaN」として返され、一方で通常関数からは長方形の正確な面積が出力されます。

<html>
<body>
<script>
    var num = {
      len: 12,
      bre: 13,
      square:() => {
          document.write(this.len * this.len);
      },
      rectangle(){
          document.write(this.len * this.bre);
      }
   };
   num.square();
   document.write("</br>");
   num.rectangle();
</script>
</body>
</html>

実行結果

NaN
156


newキーワードの挙動の違い

アロー関数は「呼び出し可能（callable）」ではあるものの「構築可能（constructible）」ではないため、「new」キーワードによるインスタンス生成は行えません。一方、通常関数は「呼び出し可能」かつ「構築可能」の両方を兼ね備えているため、newキーワードを使って新しいオブジェクトを生成できます。

サンプルコード

次の例では、newキーワードを使って引数を渡し、通常関数とアロー関数の両方を実行しています。アロー関数は構築可能ではないため「newword is not a constructor」というエラーが発生しますが、通常関数からは引数の内容が正しく出力されます。

<html>
<body>
<script>
    var word = function(){
       document.write(JSON.stringify(arguments));
       /// '{"0":"Tutorix","1":"Tutorialspoint"}' が出力される
   };
   new word("Tutorix","Tutorialspoint"); 
   var newword = ()=> {
       document.write(JSON.stringify(arguments));
       // 'newword is not a constructor' というエラーが出力される
   };
   new newword("Tutorix","Tutorialspoint");
</script>
</body>
</html>

まとめ：使い分けのポイント

最後に、両者の主な違いを整理しておきます。

  • thisの参照： 通常関数は呼び出し方によってthisが変わりますが、アロー関数は定義時の外側スコープのthisを固定して引き継ぎます。
  • new演算子： 通常関数はコンストラクタとして利用できますが、アロー関数は利用できません。
  • argumentsオブジェクト： 通常関数はargumentsを持ちますが、アロー関数は持たないため、可変長引数にはレストパラメータ（...args）を使用します。

コールバックなど短く簡潔な処理にはアロー関数が便利です。一方、メソッド定義やコンストラクタが必要な場面では通常関数を選ぶのが基本です。用途に応じて適切に使い分けましょう。

  1. JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

    アロー関数（太い矢印関数）とは 」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。 従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。 基本構文 アロー関数の基本構文は以下のとおりです。 { } 」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。 a + b; サンプルコード 次のコードは、JavaScr

  2. JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

    ファーストクラス関数（第一級関数）とは？ JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。 このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。 さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。 ファーストクラ