ホームページ » コーディング » JavaScript関数

    JavaScript関数

    JavaScript関数は、呼び出しが実行されるのを待っている間に、単にコードの束を囲むだけでは不十分です。機能は時間の経過とともに進化し、新しい定義、実行方法、構文が生まれました。この記事では、JavaScript関数がこれまで果たしてきた現在の役割のいくつかを説明します。.

    機能を表現し定義するさまざまな方法を知っていることは、 より最適な方法でロジックを実装する JavaScriptで。また、面接の質問にもっと簡単に答えることができるかもしれません。.

    関数式

    以下のように単純に関数を述べると 関数 キーワード、オプションのパラメータ、およびコード本体です。 関数 宣言.

    その宣言をJavaScriptの式に代入すると（代入式や算術式のように）、 関数 表現.

    //関数宣言関数function_name（）; //関数式var function_name = function（）;

    評価中は、すべてのJavaScript宣言が持ち上げられます（スコープ内で上に移動します）。そのため、関数宣言の前に関数呼び出しを書くことは問題ありません（宣言はとにかく上に移動するので）.

    function_name（）; //関数呼び出し[WORKS] function function_name（）;

    ただし、関数は式の一部となり、スタンドアロン宣言ではないため、関数式は必要ありません。.

    function_name（）; //関数呼び出し[動作しません] var function_name = function（）;

    即時呼び出し関数式（IIFE）

    これは関数式であり、そのコードはただちに実行されます（評価されたときに一度だけ）。追加するだけで作成できます （） （関数の呼び出しに使用される構文）関数式の直後。それらは匿名にすることができます（名前を付けずに）.

    以下は、IIFEを作成するための2つの最も一般的な構文です。

    （function optional_function_name（）// body（））;

    そして

    （function optional_function_name（）// body）（）;

    関数宣言を括弧で囲んで式に変換してから、 （） 関数を呼び出した後追加する限り、他の方法でIIFEを作成することができます。 （） 関数式の後（下記のように）ですが、好ましい方法は上記の2つです。.

    // IIFEを作成する方法のいくつか！function（）/ *…* /（）; + function（）/ *…* /（）;新しい関数（）/ *…* /;

    IIFEは、一度だけ実行する必要があるコードの作成、名前空間付け、クロージャの作成、プライベート変数の作成などに最適です。下記はIIFEの使用例です.

    var page_language =（function（）var lang; //ページの言語を取得するためのコードlang;）（）;

    ページの言語を取得するためのコードは一度だけ実行されます（できればページが読み込まれた後）。結果はに格納されます page_language 後で使うために.

    方法

    関数がオブジェクトのプロパティである場合、それはメソッドと呼ばれます。関数もオブジェクトなので、他の関数内の関数もメソッドです。以下はオブジェクト内部のメソッドの例です.

    var calc = add：function（a、b）return a + b、sub：function（a、b）return a-b console.log（calc.add（1,2））; // 3 console.log（calc（80,2））; // 78

    の 追加する そして サブ 関数はのメソッドです 計算 物.

    関数の例の中の関数について

    function add（a）return function（b）return a + b; console.log（add（1）（2））; //出力は3

    返された無名関数は関数のメソッドです 追加する.

    注：パラメータ以降（ある機能） 追加する 上記の例では、次の関数呼び出しに使用でき、このタイプのプロセスは呼び出されます。 カレー.

    コンストラクタ

    追加したとき 新しい 関数の前にキーワードを付けて呼び出すと、インスタンスを作成するコンストラクタになります。以下は、コンストラクタを使用してのインスタンスを作成する例です。 フルーツ それぞれに値が追加されます フルーツの特性.

    function Fruit（）var name、family; //学名とファミリーthis.getName = function（）return name;; this.setName = function（value）name = value; this.getFamily = function（）return family;; this.setFamily = function（value）family = value; var apple = new Fruit（）; apple.setName（ "Malus domestica"）; apple.setFamily（ "バラ科"）; var orange = new Fruit（）; orange.setName（ "シトラス×？？¢Â？？？ sinensis "）; orange.setFamily（" Rutaceae "）; console.log（orange.getName（））; //" Citrus×××¢Â？？？ sinensis "console.log（apple.getName（））; //" Malus domestica "console.log（orange.getFamily（））; //"ミカン科 "

    矢印機能（ES6標準）[Firefoxのみ]

    ES6規格からの新しい関数定義は、関数式のためのより短い構文を提供します。構文は次のとおりです。

    （）=> / * body * /

    このサンプル関数：

    var sing = function（）console.log（ 'singing…'）;

    と同じです。

    var sing =（）=> console.log（ 'singing…'）;

    矢印関数は匿名で独自のものはありません この 値, この 内部はそれと同じになります この 囲んでいるコードで。また、次のようにしてコンストラクタに変更することはできません。 新しい キーワード.

    彼らはあなたが欲しいときに便利です。 この 関数の内側は外側と同じになり、その短い構文は関数内で関数を書くためのコードを簡潔にします（以下のように）

    setInterval（function（）console.log（ 'message'）、1000）;

    に

    setInterval（（）=> console.log（ 'message'）、1000）;

    ジェネレータ関数（ES6標準）[Firefoxのみ]

    ES6規格のもう1つの新しい機能定義はジェネレータ機能です。ジェネレータ関数は実行を停止して継続することができます。その構文は次のとおりです。

    関数* function_name（）

    または

    関数* function_name（）

    ジェネレータ関数はイテレータを作成します。イテレータ 次 その後、methodを使用してジェネレータ関数内のコードを実行します。 産出 キーワードに達しました。その後、によって識別された反復値 産出 keywordがジェネレータ関数によって返され、実行が停止されます.

    ジェネレータ関数は、 次 次のメソッドまで呼び出される 産出 キーワードに達しました。すべての 産出 式が実行され、得られた値が返されます。 未定義.

    以下は簡単な例です。

    function * generator_func（count）（var i = 0; iの場合 
    これは別の例です。
     
    関数* randomIncrement（i）yield i + 3;収率ｉ ＋ ５。収率ｉ ＋ １０。収率ｉ ＋ ６。 var itr = randomIncrement（4）; console.log（itr.next（）。value）; // 7 console.log（itr.next（）。value）; // 9 console.log（itr.next（）。value）; // 14 
     
    またあります 産出* 値を別のジェネレータ関数に渡す式
     
    機能*フルーツ（フルーツ）収穫*野菜（フルーツ）; "ブドウ"を生み出す。 function * veggies（fruit）フルーツ+収穫量+ "とほうれん草";果実を産む+ "そしてブロッコリー";果実を産む+ "とキュウリ"; var itr = fruits（ "Apple"）; console.log（itr.next（）。value）; // "Apple and Spinach" console.log（itr.next（）。value）; // "Apple and Broccoli" console.log（itr.next（）。value）; // "Apple and Cucumber" console.log（itr.next（）。value）; // "Grapes" console.log（itr.next（）。value）; //未定義 
     
    ジェネレータ関数は、配列内をループするのではなく、コード内の好きな場所で一時停止して値を1つずつ調べたい場合に便利です。.
     
    結論
     
    私は以下に参考文献のリストを含めました、そこであなたは別々に異なるトピックについて深く行く参考文献と記事へのリンクを見つけるでしょう. 現時点では、両方のES6標準機能はFirefoxでのみ機能します。.
     
    参考文献
     
    • ECMAScript言語：関数とクラス
      •  
    • 即時起動関数式（IIFE）
      •  
    • ES6ジェネレータの基本
      •  
    • 矢印機能
      •  
    • 関数 - Mozilla開発者ネットワーク  
      •
    JavaScript Jargon知っておくべき10の用語
    クールスクロール効果のためのJavaScriptライブラリ
    Javaは安全ではなく、ひどいものです。無効にする時が来ました。
    次の記事
    JavaScriptはJavaではありません - はるかに安全で、はるかに便利です
    前の記事
    OS X上のJavaはバンドルクラップウェアです、ここでそれを停止させる方法は次のとおりです。