JavaScript IIIIFE

2602 ワード

1定義
IIIF:Immediately Invoked Function Expressionは、すぐに呼び出される関数式、すなわち、ステートメント関数の同時に直ちにこの関数を呼び出すという意味です.対照的に、IIIIFを使用しない場合の関数宣言と関数呼び出しです.

function foo(){
  var a = 10;
  console.log(a);
}

foo();   IIFE       ：
(function foo(){
  var a = 10;
  console.log(a);
})();

関数の宣言とIIIFの違いは、関数の声明の中で、まず見たのはfunctionのキーワードです.IIIIFCEはまず見たのは左の(ということです.つまり、ペア()を使っています.関数の声明をまとめて、JSコンパイラは関数宣言ではなくIIIIIFEであり、すぐに声明の関数を実行する必要があります.両者の目的は同じです.関数fooを宣言して関数fooを呼び出します.
2なぜIIFが必要ですか?
すぐに関数を実行するためだけには、IIIIIIFのメリットが限られています.実際には、IIIFの出現は、JSのscope上の欠陥を補うためです.JSはグローバルスコープ、関数スコープのみです.ES 6からブロックレベルのスコープがあります.現在流行している他の対象向けの言語に比べて、JSはアクセス制御の面でどれほど脆弱なのかが分かります.では、どのように機能領域の分離を実現しますか?JSでは、functionだけが機能ドメイン分離を実現するため、コードの中の変数や関数などの定義を分離するなら、このコードをカプセル化するしかないです.関数について.一般的な理解では、コードを関数にパッケージ化する目的は多重化です.JSではもちろん、ステートメント関数の目的は、大多数の場合も多重化のためですが、JSはスコープ制御手段の貧困に迫られています.一回だけの関数を使用することもよく見られます.一回だけ使うなら、関数の名前も省きます.これがIIIFEの由来です.
3 IIIIFの一般的な形式
最後に関数の実行を示すペア()の位置によって、一般的なIIIFEの書き方は2種類あります.例は以下の通りです.

(function foo(){
  var a = 10;
  console.log(a);
})();

リスト2:IIIIIFE書き方2

(function foo(){
  var a = 10;
  console.log(a);
}());

この2つの書き方は効果が全く同じです.どの書き方を使うかはあなたのスタイルによって決まります.最初の書き方はよくあるようです.IIIFは()の表現形式[1]に限らないですが、約束通りの習慣を守ったほうがいいです.
4 IIIIFの関数名とパラメータ
「You Don’t Know JS:Scope&Clouses」によると、匿名関数の使用はできるだけ避けるようにしています.しかしIIIIFは一回だけ実行します.IIIIIFに名前を付けると蛇足があります.IIIIIFに名前をつけるなら、IIIIIFKEと呼んでください.以下のようなパラメータを持ってもいいです.

var a = 2;
(function IIFE(global){
    var a = 3;
    console.log(a); // 3
    console.log(global.a); // 2
})(window);

console.log(a); // 25 IIFE

JSのモジュールは関数です.最も一般的なモジュールの定義は以下の通りです.

function myModule(){
  var someThing = "123";
  var otherThing = [1,2,3];

  function doSomeThing(){
    console.log(someThing);
  }

  function doOtherThing(){
    console.log(otherThing);
  }

  return {
    doSomeThing:doSomeThing,
    doOtherThing:doOtherThing
  }
}

var foo = myModule();
foo.doSomeThing();
foo.doOtherThing();

var foo1 = myModule();
foo1.doSomeThing();

単例モードのモジュールが必要な場合は、IIIIFを利用することができます.

var myModule = (function module(){
  var someThing = "123";
  var otherThing = [1,2,3];

  function doSomeThing(){
    console.log(someThing);
  }

  function doOtherThing(){
    console.log(otherThing);
  }

  return {
    doSomeThing:doSomeThing,
    doOtherThing:doOtherThing
  }
})();

myModule.doSomeThing();
myModule.doOtherThing();

5まとめ
IIFの目的は、役割領域を隔離し、グローバルネーム空間の汚染を防止することです.ES 6以降は、より良いアクセス制御手段(モジュール?クラス?)があるかもしれません.研究が必要です.

JS削除確認整理収集