JavaScript匿名、名前関数と即座実行関数IIIIIFE詳細

JavaScriptにおける関数のスコープの存在は、変数と関数を「隠し」することで、私たちの最小特権原則に合致すると同時に、そのもう一つの利点は、同名の識別子の衝突を避けることができるということです.今日は主にこの即座実行関数についてお話しします.これまでの匿名関数と名前関数を復習します.
匿名関数と名前関数
匿名であろうと名札であろうと、関数表現に対する関数宣言は名前が必要です.そうでないとエラーが発生します.

function foo(){ //    
    //...
}

ここでは私が文章を書いているところを説明します.例コードはいつもfn、func、demo、foo、bar、foobaarなどの単語fn、funcがfunctionの「関数」の略語であるdemoです.foobaarは技術書やコンピュータの文献でfooがfuの変体であることをよく見ます.fuck-upの略語です.「一団糟」barは「beyond all recognition」で、「認知を超えて」という意味です.一般的に「認識できない、めちゃくちゃ」と言われていますが、私達の暁小紅、甲乙丙丁、張三李四に相当します.
関数式は名前があってもいいし、名前がなくてもいいです.

var foo = function(){
    ...};
console.log(foo.name); //foo
var bar = function foobar(){
    ...};//     
console.log(bar.name); //foobar

二つ目の書き方が見られますが、単に関数のname属性を変えただけです.これ以外は何の役にも立たないです.このように書かないでください.
これ以外に、私たちがよく使うのは、関数表現がコールバックパラメータとして使われています.例えばタイマーでは

setTimeout(function(){
    //...
},1000);

ここで匿名関数表現を書きました.簡単で乱暴ですが、いくつかの欠点があります.

追跡スタックには関数名がなく、デバッグ困難

自己参照が必要であれば、argments.calee(ES 5厳格モード無効)

しか使用できません.

は、関数可読性、理解性を低減する

.
イベントのバインディングを解除するには、関数名も必要です.(onclickなどで直接的に結合しないと)関数式に名前を付けるのは最適な実践です.いい習慣です.

setTimeout(function timerHandler(){
    //...
},1000);

すぐに関数の使用法を実行します.
直ちに関数を実行して、私はこのように呼び慣れています.また、自己実行関数や自動実行関数などというより標準的なものがあります.
これは文法ではなく、みんなが使って発見したものをそのまま使って流布しています.今までは名前の通り、実行フローがこの関数に実行されてすぐにコミュニティで用語を規定しました.IIIIIFree(Immeditely Invoked Function Expression)
私たちがよく使う使い方は:

(function(){
    //...
}());

(function(){
    //...
})();

IIFを使う時は匿名関数式を使うのが一般的です.名前を入れてもいいです.有名関数式の長所を持っています.二つの使い方はまったく同じです.どちらを使うかはあなたが決めますが、括弧を外に書いたほうがいいです.見ていて気持ちがいいです.多くの大神も私と同じです.
関数のステップの使い方を直ちに実行します.
少しの階段の使い方は、すぐに実行する関数の中でパラメータを伝達することです.例えば、私たちのよくある伝達window.

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

windowを伝えるにはどんなメリットがありますか?私たちの役割領域の観点から(私が書いたスコープを見てもいいです.転送ゲート)グローバルオブジェクトの参照キャッシュは、ローカル環境に達しています.これにより、グローバルオブジェクトにより早くアクセスできます.トップクラスの役割エリアにジャンプしなくてもいいです.このような小さい最適化は重点の圧縮コードではない時に最適化できます.上のコード圧縮ツールはこのように圧縮できます.

var a = '  ';
(function IIFE(g){
    var a = '  ';
    console.log(a);// "  "
    console.log(g.a);// "  "
})(window);

コードが大きい時、この最適化を軽視しないでください.
関数の使用法を直ちに実行します.
IIIFにはもう一つの変化があります.きっとお会いしたことがあります.

(function IIFE(demo){
    demo(window);
})(function demo(global){
    //...
});

このように動作する関数をパラメータに入れるパターンは面倒そうですが、広く使われています.jQueryなどのフレーム全体の構造もこれと似ています.見慣れたら、私たちの伝統的な使い方よりも分かりやすいと思います.
全体の関数式はIIIIFEの第二部分に定義されています.パラメータとしてIIIFEの第一部分に伝達され、この関数を呼び出し、windowをパラメータとして伝えられます.
直ちに関数の理解を実行します.
すぐに実行する関数はなぜ自動的に実行されますか?

(function(){
    //...
})();

なぜfunction(){}()にこのように書いてもいいですか?これは関数宣言ですので、関数宣言は実行できないのです.表現だけで実行できます.

var demo = function(){
     
    console.log(1);// 1
    return 123;
}();
console.log(demo);// 123

これは表式ですので、デモを実行して得られるのは関数の戻り値です.表式が実行できる以上、以下の方法はすぐに実行できます.

+function(){
     
    console.log(1);// 1
}();
-function(){
     
    console.log(2);// 2
}();
!function(){
     
    console.log(3);// 3
}()
,function(){
     
    console.log(4);// 4
}();

コンマでも関数式にしてすぐ実行できますが、関数の戻り値があれば、思わぬ副作用を起こし、可読性も悪くなります.このように書いてはいけません.
締め括りをつける

関数宣言には名前が必要です.

具名関数式は、最適な実践

である.

直ちに関数式の使用法を実行します.(function(){}());

は、直ちに関数伝達windowパラメータを実行し、作用領域チェーンでwindow速度を検索することを最適化し、圧縮コード

に有利である.

式だけが実行されます.

==ホームゲート=