2016年8月9日火曜日

JavaScript IIFE(Immediately Invokable Function Expression) デザインパターン

C++/C#を学んで、JavaScriptを勉強始めてみると、JavaScriptのIIFE(Immediately Invokable Function Expression)で、私は悩みました。

この即時関数を初めて知った時、その必要性が分かりませんでした。
それは、「普通に関数を定義して、その関数を呼び出すのと何が違うんだろう」って思ったからです。

そのIIFEについて、書いたサイトがあったので、勉強して、簡単にまとめてみました。


1、IIFE(Immediately Invokable Function Expression)
イッフィーと呼ぶ。
即時関数(即時関数は関数を定義すると同時に実行するための構文)と呼ばれています。
目的は、カプセル化の為に使われるようです。

【定義】
//即時関数の構文
(function () {
    //関数の中身・・・
}());

即時関数は定義の後すぐに実行され再利用もされないため、関数名は不要

//引数つきの構文の場合
(function (param1, param2, ...) {
    //関数の中身・・・
}('hoge', 'fuga', ...));
・・・・hoge,fugaは初期値

【例文】
var test = (function(){
    var n = 0;
    return {
        getN: function(){
            return n;
        },
        setN: function( x ){
            n = x;
        }
    }
})();
test.setN(99);
test.getN();  // 99と表示
test.n;     // エラーとなる(nはカプセル化されて直接参照できない)




2、Function関数

【定義】
 function 関数名 ( 引数 ){
    命令文;
    return 戻り値;
}

戻り値 = 関数名 ( 引数 );
 
また、次のように関数funcを定義して、callで実行する方法もあります。 
var func = function() {
    console.log('Hello World!!');
};
func.call();// 呼び出し


その他、applyなどもありますが、次のURLを一読するとわかりやすかったです。
http://www.xenophy.com/learning_place/javascript/function/1_arguments/



3、名前付き関数と即時関数の主な用途の違い
Funcion関数 : 再利用を前提とした一連の処理を定義する
IIFE(即時関数) : 再利用されない一連の処理を新たなスコープで包み込む



【参考URL】
http://aphall.com/2013/06/javascript-iife-module-pattern/ 
http://qiita.com/kyoshiro-obj/items/dc9a336f56f8ddaa1488 
http://analogic.jp/immediate-function/
http://www.codeproject.com/Articles/1110916/JavaScript-IIFE-Design-Pattern

0 件のコメント:

コメントを投稿