(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更
それと日記見返すと、昔の方が雑記的だなぁと思った。。
うーん、そう考えるとローカルのもったいないメモは多そうだ。
今度書き出せたらいいなぁ。。
で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。
謎って思ったのはおおまかに３つ。
- 何故全体を括弧で囲む必要があるのか。
- function($)の「$」って何？
- ２個目の括弧の中の「jQuery」って何？
これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw
http://q.hatena.ne.jp/1226297257
上記のURL先を参考になんとなく理解してみたのでまとめてみる。
しかしちゃんとした解決はしていないと思うw
まぁ一応記録ということで。。
何故全体を括弧で囲む必要があるのか。
無名関数にしてコードを外部と分離して使うため。
大まかにいうとこんな感じなのだろうか？
確かに全部functionの中になるから、関数名やらがかぶる心配を考慮しなくていいのかも？と思いました。
でも中で完結させてるのに外でも使えるってなんだかすごい。。
function($)の「$」って何？
上記URL中にある、下記のコードを実行してみたらわかりました。
(function (x){ alert(x); })("hoge");
"hoge"が来ました。
どうやら２個目の括弧の中身が引数として渡されているものよう。
ってことは「$」は「jQuery」ってことか。なるほど。
２個目の括弧の中の「jQuery」って何？
２個目の括弧の中身自体は、その関数への"handle"らしいです。
それをかくことによって無名関数が使えるようになる？どういうことだろう？
とりあえず２個目の括弧がどういう挙動をするのかを確認してみる。
(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個目がなんかおかしく感じる。２回「aa」て表示されてもいいと思ったんだけどなぁ。
３個目はどっちも吐かれてるのに・・。まぁいいか。（何
とりあえずまぁ引数みたいなものだなと思っとくことにする。
しかしこうなると、「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 なしの変数に入れるのとどう違うんだろう？なんてちょっと思ってみたり。。（何
