Hatena::ブログ(Diary)

お勉強orz日和

2009-05-26

(function($) {})(jQuery);って何?って思ったからいろいろ試してみた記録

どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました(今更

それと日記見返すと、昔の方が雑記的だなぁと思った。。
うーん、そう考えるとローカルのもったいないメモは多そうだ。
今度書き出せたらいいなぁ。。

で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味?て思ったので、調べたりとかしてました。
謎って思ったのはおおまかに3つ。

  • 何故全体を括弧で囲む必要があるのか。
  • function($)の「$」って何?
  • 2個目の括弧の中の「jQuery」って何?

これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw

http://q.hatena.ne.jp/1226297257
上記のURL先を参考になんとなく理解してみたのでまとめてみる。
しかしちゃんとした解決はしていないと思うw
まぁ一応記録ということで。。

何故全体を括弧で囲む必要があるのか。

無名関数にしてコードを外部と分離して使うため。
大まかにいうとこんな感じなのだろうか?
確かに全部functionの中になるから、関数名やらがかぶる心配を考慮しなくていいのかも?と思いました。
でも中で完結させてるのに外でも使えるってなんだかすごい。。

function($)の「$」って何?

上記URL中にある、下記のコードを実行してみたらわかりました。

(function (x){ alert(x); })("hoge");

"hoge"が来ました。
どうやら2個目の括弧の中身が引数として渡されているものよう。
ってことは「$」は「jQuery」ってことか。なるほど。

2個目の括弧の中の「jQuery」って何?

2個目の括弧の中身自体は、その関数への"handle"らしいです。
それをかくことによって無名関数が使えるようになる?どういうことだろう?
とりあえず2個目の括弧がどういう挙動をするのかを確認してみる。

(function (a){a})(console.log("aa"));
(function (a){console.log(a)})("aaa");
(function (a){console.log("hoge")})(console.log("aaaa"));


結果

aa
aaa
aaaa
hoge

1個目がなんかおかしく感じる。2回「aa」て表示されてもいいと思ったんだけどなぁ。
3個目はどっちも吐かれてるのに・・。まぁいいか。(何
とりあえずまぁ引数みたいなものだなと思っとくことにする。

しかしこうなると、「jQuery」はどこからきてるのだろう・・。
http://hisasann.com/housetect/2008/06/jquery_1.html
と、上記のサイトを発見。jQueryにアクセスする方法が書いてある。

var jQuery = window.jQuery = window.$ = function (ele) {

どうやらこれで外でも使えるようになってるらしい?

(function(hoge) {console.log(hoge('#test'))})($);

ほう。。
windowオブジェクトに突っ込めばつかえるのか・・。var jQueryにわざわざつっこむ理由はなんだろうか・・と思ったがそこは今は関係ないのでスルー。

(function() {window.hoge = "aaaa"})();
(function(huga) {console.log(huga)})(hoge);


結果

aaaa

おぉ。使える。。
var なしの変数に入れるのとどう違うんだろう?なんてちょっと思ってみたり。。(何

自分なりなまとめ

  • 何故全体を括弧で囲む必要があるのか。

 →無名関数にして中のコードを外部と分離して使うため。

  • function($)の「$」って何?

 →2個目の括弧の中身(つまりjQuery

  • 2個目の括弧の中の「jQuery」って何?

 →windowオブジェクトにつっこまれてるjQueryっていうオブジェクト(?)

とまぁ、こんな感じ?でした!
なんとなくモヤモヤも晴らせたし、いろいろ試せて楽しかったです!

HexaHexa 2009/05/26 23:09 (function(){})() と書くのは,無名関数を即時実行するためです.最後の括弧には,無名関数を即時実行する際の引数を指定します.

また,(function (a){})(console.log("aa")); を実行するとわかりますが,console.log("aa") は呼び出された時点(引数に指定した時点)で実行されるため,無名関数の内容にかかわらず,「aa」が出力されます.

initializeinitialize 2009/05/27 12:26 コメントありがとう御座います!
>(function(){})() と書くのは,無名関数を即時実行するためです.
そうですよね、「何故全体を括弧で囲む必要があるのか。」という問に関しては確かに「無名関数を実行させるため」という答えの方が正しい気がします;
↑の自分の答えだと「何故(function(){})()で書く必要があるのか」の方がしっくりくるような・・そんな気がしました^^;

>最後の括弧には,無名関数を即時実行する際の引数を指定します.
おぉやはり2個目の括弧の中は引数みたいなものだったのですね!
確かに無名関数を即時実行させたい場合だと、引数を渡してやれるところはそこしかないと感じました。
2個目の括弧を書く事によって即時実行される理由がなんとなくですがわかった気がしました。

>また,(function (a){})(console.log("aa")); を実行するとわかりますが,console.log("aa") は呼び出された時点(引数に指定した時点)で実行されるため,無名関数の内容にかかわらず,「aa」が出力されます.
なるほど引数に指定された時点で実行されているのですね。。
var test = function (hoge) {
console.log(hoge);
}
var a = test('hoge');
を実行してみてやっと(function (a){a})(console.log("aa"));の結果が「aa」でおかしくないと言う事に気付きました^^;(遅;

とても勉強になりました!
いろいろ有り難う御座いましたm(_ _)m