目的

2016-04-27 7 views
21

私は目的

(function(){ 

    window.bar = 'baz'; 

})(); 

同じ上、上記の利点は何古いJavaScriptの

(function (w){ 

    w.bar = 'baz'; 

})(window); 

にこれの多くを見ます任意のglobal variable、またはIIFEの外に定義された変数になります。

+0

'関数f1(f){コンソールログ(f)} f1(1); '関数f1(){コンソール。log(1)} f1(); 'これは実行時にパラメータを定義する利点を提供します(他の場所で定義することもできます)。 – gurvinder372

+11

[ローカルスコープ内にグローバルオブジェクトを置くことができるため、内部検索速度とパフォーマンスが向上します。](http://gregfranko.com/blog/i-love-my-iife/) – Rayon

+0

@Rayonコメント – smnbbrv

答えて

12
  1. 関数内でグローバルを使用している(およびおそらく変更している)ことを明示します。
  2. 今後の動作を変更することができます。ユニットテストのためにmockWindowがあるかもしれません。 Node.jsを使用していて、windowがなく、代わりにglobalsのvarに追加したい場合があります。

p.s. IMOは、@レイヨンが言及した些細なパフォーマンスの向上は赤いニシンです。

0

window、document、$などのグローバルオブジェクトをIIFE(Immediately Invoked Function Expression)に渡すことで、スコープルックアップ時間を短縮してパフォーマンスを向上させることができます。 Javascriptは、最初にローカルスコープでプロパティを探し、グローバルスコープまでチェーンアップすることを覚えておいてください。したがって、ローカルスコープでウィンドウオブジェクトにアクセスすると、ルックアップ時間が短縮されます。

2

ローカル変数がグローバル変数よりも簡単かつ迅速にアクセスできるため、ウィンドウが渡されます。これはパフォーマンスにわずかな差が生じることがあります。この方法は実際にモジュールパターンや依存関係注入に便利です。

var moduleFirst = (function(){ 
    var name = "harry"; 
    return { 
     firstparam : name 
    } 
})(); 
var moduleTwo = (function(x){ 
    console.log(x.firstparam); 
})(moduleFirst) 

出力は次のようになります。ハリー・ウィンドウは生命維持に渡されるので、

。明らかにされたすべてのメソッドは、ローカル変数で使用できます。

3

実際にはあなたが与えた例ではあまり差はありませんが、はおそらく実際に見ているコードからです。

より現実的なプログラムでは、イベントループ内で非同期にトリガされて実行されるスコープとコールバックがあり、変数をクロージャ内の特定のインスタンスにバインドしています。

(function (w){ 
    setTimeout(function(){w.bar = 'baz';},100); 
})(window); 
window = window2; 

ことがwにバインドされているものであるため、バーはまだ、元のウィンドウに設定されている - どのようにそれがあるので、

(function(){ 
    setTimeout(function(){window.bar = 'baz';},10); 
})(window); 
window = window2; 

にそれは、インスタンスWINDOW2に設定される場所コードの実行が最終的に発生したときにウィンドウがバインドされます。

この例では、「ウィンドウ」はグローバル変数ですが、バインドされる変数のスコープに関係なく同じです。