ホームページ > ウェブフロントエンド > jsチュートリアル > jsのアロー関数と通常の関数の違い

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

藏色散人
リリース: 2019-04-13 10:45:24
オリジナル
4284 人が閲覧しました

この記事では、JavaScript のアロー関数と通常の関数 の違いを主に紹介します。

アロー関数 - ES6 で導入された新機能 - は、JavaScript での簡潔な関数の作成をサポートします。通常の関数とアロー関数は同様に機能しますが、以下で説明するように、それらの間にはいくつかの興味深い違いがあります。

構文

通常の関数の構文:

let x = function function_name(parameters){ 
   // 函数体
};
ログイン後にコピー

通常の関数の例:

let square = function(x){ 
  return (x*x); 
}; 
console.log(sqaure(9));
ログイン後にコピー

出力:

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

アロー関数の構文:

let x = (parameters) => { 
    // 函数体
};
ログイン後にコピー

アロー関数の例:

var square = (x) => { 
    return (x*x); 
}; 
console.log(square(9));
ログイン後にコピー

出力:

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

this キーワードを使用します

通常の関数とは異なり、アロー関数には独自の this がありません。

#例:

let user = { 
    name: "GFG", 
    gfg1:() => { 
        console.log("hello " + this.name); 
    }, 
    gfg2(){        
        console.log("Welcome to " + this.name); 
    }   
 }; 
user.gfg1(); 
user.gfg2();
ログイン後にコピー

出力:


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

##arguments オブジェクトの可用性

#引数オブジェクトはアロー関数では使用できませんが、通常の関数では使用できます。

通常の関数の例:

let user = {       
    show(){ 
        console.log(arguments); 
    } 
}; 
user.show(1, 2, 3);
ログイン後にコピー
出力:アロー関数の


jsのアロー関数と通常の関数の違い例:

let user = {      
        show_ar : () => { 
        console.log(...arguments); 
    } 
}; 
user.show_ar(1, 2, 3);
ログイン後にコピー
出力:


##新しいキーワードを使用します jsのアロー関数と通常の関数の違い

関数を使用します宣言または式によって作成される通常の関数は、「構築可能」かつ「呼び出し可能」です。通常の関数は構築可能なため、「new」キーワードを使用して呼び出すことができます。ただし、アロー関数は「呼び出し可能」であるだけであり、構築可能ではありません。したがって、 new キーワードを使用して構築不可能なアロー関数を構築しようとすると、実行時エラーが発生します。

通常関数の例:

let x = function(){ 
    console.log(arguments); 
}; 
new x =(1,2,3);
ログイン後にコピー

出力:

アロー関数の例:jsのアロー関数と通常の関数の違い

let x = ()=> { 
    console.log(arguments); 
}; 
new x(1,2,3);
ログイン後にコピー

出力:


関連する推奨事項: 「

javascript チュートリアルjsのアロー関数と通常の関数の違い

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート