javascriptのwindowをローカル変数にしてわずかに高速化

(function(window, document, undefined){
	// ここに処理を書く
})(this, this.document);

jQueryiScrollなどの大手ライブラリでも見かけるこの書式は一体なんのことなのか調べてみました。

windowやdocumentをグローバル変数からローカル変数へ変更している

呼び出されるたび、根本までたぐっていく参照のグローバル変数よりも
今いるエリア内を参照するローカル変数のほうが処理がわずかにショートカットでき、パフォーマンスアップになります。
なお、効果はおまじない程度。

javascriptをminifier(圧縮)したとき1文字の変数名に置き換え、文字数を減らしてファイルの軽量化=高速化を図ることも。

(function(w,d){/*ここに処理を書く*/})(this,this.document);

jQueryやundefinedを保証する

グローバル変数のローカル化のほか、見かけるのが、$やundefinedを組み合わせたパターン。

(function($, window, document, undefined){
	// ここに処理を書く
})(jQuery, this, this.document);

InternetExplorer8などのレガシーなブラウザでは、undefinedは予約語ではないグローバルなオブジェクトになっていて
undefinedという変数名で新たにローカル変数を宣言することができてしまいます。
そこで、あえてローカル変数としてfunctionでundefinedをundefinedと宣言している運びです。

最新のブラウザではundefinedを上書きできないので、このundefined宣言は古いブラウザ向けの記述といえます。

functionで$をローカル変数として宣言するのも $ = jQuery と改めて宣言しているということです。

参考:
ステートフルJavaScript 4章
JavaScript の関数の中で window と undefined を定義する理由を調べてみた

関連記事

Pocket