謎のjavascript、『(function (){})();』｜ぼくんちのバックステージ

謎のjavascript、『(function (){})();』

アチコチのサイトのソースを覗き見しまくって、『(function (){hoge;hoge;})();』みたいな関数定義がしてあるjavascriptを色々な所で発見。なにこれ？

序文：function

私の知っているfunctionの使い方は二つ。

function aaar() {hoge;hoge;}
var bbb = function(c, d, d) {hoge;hoge;}

みたいな感じで変数に関数を定義して後から呼び出す方法。
しかしこの『(function (){hoge;hoge;})();』ってのは、、、

なんで変数を定義しないの？
なんでコレで作動するの？
ドコで呼び出しているの？
前と後ろ、二つ()があるのは何なの？

いやもう、謎だらけ。
私はjavascriptに関してはかなりの素人です。

サイト内のアチコチに自作javascriptを書いたりしてますが、その全てが「他所のサイトで利用されているモノ」、「Tipサイトで紹介されているモノ」、「フリーで配布しているモノ」を組み合わせて殆ど山勘で「多分ココを弄れば自分の好みに変わるだろう」とカスタマイズしたものばかりです。

今回は何がどうなっているのかサッパリ解らず、マネしてみたいものの、完全にお手上げ状態でした。

プログラムの正体は「無名関数」、そして「クロージャ」

上記の様な変数定義をしていない関数を、無名関数と呼び、「関数の中で利用する関数」として使うんだそうです。

で、さらに「関数の中で使う」「クロージャ」ってモノがあるらしいです。
（↑これ後日訂正した文章。当初このページは、無名関数とクロージャをかなり混同して記載していました。クロージャについては、この下で紹介しているリンクを参照のこと）

関数の名前さえ解ってしまえば後は何とかなります（＾_＾;

ほぼ素人でもよく解る解説サイト

[JavaScript]　猿でもわかるクロージャ超入門　１　問題 - DQNEO起業日記
6ページに渡って、凄く丁寧に解説されてます。
ここを読むとクロージャの仕組みや作り方が解るだけでなく「なぜクロージャが便利なのか」まで解りました。クロージャを使った関数は、複数回呼び出したときに、以前の状態を保持しているんですね。

で、無名関数を使わなくても、関数内で別の関数を定義すればこの「状態の保持」は出来るみたい。なるほどなるほど。

上記が解った上で、以下のサイト
(function(){})() と function(){}() - IT戦記
これを読むと「なんで前後に()をくっつけているか」が解って来る。

で、さらに
第ニ章 JavaScript関数の基本を知る
恐らく基本中の基本が書いてあるんだろうけど、ようやく内容が理解できるようになって来た。

あとがき

今まで「オブジェクト指向」って言葉の意味とか、「何が便利なのか」とか、サッパリ解らなかったけど、今日ようやくその一部が理解できた感じ。

JavaScriptの知識がレベルアップしてきたぞぉ。

Category: javascript | 投稿:2009年12月13日（最終更新:2010/05/24）
一つ前の記事 : サイトの表示速度
一つ後の記事 : 未整理リンク集：javascript

カテゴリー

謎のjavascript、『(function (){})();』

javascript,function,クロージャ,無名関数,定義などについて。