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

JavaScriptの通常の関数とArrow関数？

通常の関数と矢印関数

矢印関数 コードを簡潔に記述するために使用されます。両方の機能通常 および矢印 同様の方法で動作しますが、それらの間にはいくつかの違いがあります。それらの違いについて簡単に説明しましょう。

矢印関数の構文

let x = (params) => {
// code
};

通常の関数の構文

let x = function functionname(params){
// code
};

「this」キーワードの使用法

矢印関数では「this」キーワードを使用できませんが、通常の関数では邪魔されずに使用できます。

例

次の例では、両方の通常 （長方形）と矢印 （正方形）関数はオブジェクト「 num」内で使用されました "、len（長さ）とbre（幅）のプロパティで構成されています。私たちの目的は、正方形の領域を見つけることです。 （len * len）矢印関数を使用 および長方形の面積 （len * bre）通常を使用 関数。しかし、「これ "キーワードは矢印関数では機能しません 正方形の面積の値 「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 「ここでは機能しませんが、通常の機能 どちらも「呼び出し可能 "と"構築可能 "したがって、"新しい "キーワードはここで機能します。

例

次の例では、「 new」を使用しています "キーワードいくつかの引数が通常の両方に渡されました および矢印 関数。しかし、矢印機能以降 「構築可能」ではありません 「エラーが発生しますが、通常の関数への正当な出力が得られます 。

<html>
<body>
<script>
   var word = function(){
      document.write(JSON.stringify(arguments)); 
       ///  executes '{"0":"Tutorix","1":"Tutorialspoint"}' as output
   };
   new word("Tutorix","Tutorialspoint");  
   var newword = ()=> {
      document.write(JSON.stringify(arguments)); 
      //executes 'newword is not a constructor' as output
   };
   new newword("Tutorix","Tutorialspoint");
</script>
</body>
</html>

  1. JavaScriptの太い矢印関数

    太い矢印関数の構文は次のようになります- (param1,param2,..)=>{ } しかありません。 以下は、JavaScriptでファットアロー関数を実装するコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&

  2. JavaScriptのファーストクラス関数

    JavaScriptは関数をオブジェクトとして扱い、関数をパラメーターとして別の関数に渡したり、他の関数から関数を返したりすることもできます。 JavaScriptでは、関数はファーストクラスの関数です。つまり、変数、オブジェクト、配列に格納できます。高階関数は、関数を取得するか、関数を返すか、またはその両方を実行できます。 以下は、JavaScriptでファーストクラス関数を実装するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT