実行の順番を教えて下さい。

質問

----------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
(
tmp_jquery=jQuery　・・・（１）
)(
function(){
$=jQuery=tmp_jquery;　・・・（２）
}
);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
$(function(){
alert(jQuery.fn.jquery);　・・・（３）
});
</script>
----------------------------------------------------------------------------------------------------------------

上記の処理では、jQuery1.7.1をロードして後、jQuery1.2.3をロードしていますが、
（１）のところで、jQuery1.7.1を保持し、
（２）で再び$とjQuery変数にロードしているため
（３）のところで、"1.7.1"と表示されます。

さて、ここで（２）の部分がいつ実行されるのかが理解できません。
そもそも、今回の処理で記述されている ()() の意味がわかりません。

クロージャーなどで、
(function(){})() と記述しますが、
function(){}を式として認識させるために丸括弧で囲っているのは、
以下のサイトで知りました。
http://d.hatena.ne.jp/amachang/20080208/1202448348

今回も同様の意味なのでしょうか？

だとすれば、（１）の前に（２）が実行されそうなのですが・・・。

どなたか、ご説明お願いできないでしょうか？

回答No.2

dscripty · ベストアンサー

[ANo.1] の補足への回答ね。

> $()で囲まれていれば DOMが完成したときと理解できるのですが、
> 囲まれていないのに、DOMが完成したときに呼
> ばれるのはなぜなのでしょうか？？

『$() 囲んである関数は、DOM が完成したときによばれる。』
ではなくて。
『jQuery オブジェクト() で囲んである関数は、DOM が完成したときによばれる。』

だから

$(関数); //と書いても
jQuery(関数); //と書いても
(tmp_jquery=jQuery)(関数); //と書いても

DOM が完成したときに関数がよばれる。

という説明でよさそう？

お礼

なるほど、そう言うことだったんですね！
ガッテンしました。

詳細な説明ありがとうございました。
感謝しています。

回答No.1

dscripty

前提

- 式は評価後すぐ実行される
- 関数は評価後、関数を呼び出す式が評価されて初めて実行される
- 関数を呼び出す式の評価は、始めに引数が評価されて
  そのあと関数の中の式が順に評価される。
- $(関数); と jQuery(関数); は
  $(document).bind("ready", 関数); の簡略構文で、
  この機能は document の DOM が完成したときに
  「関数」が呼び出されるように予約しておくというもの。
  つまり $(関数); の関数はその時点では評価されるだけで、
  呼び出されるのは document の DOM が完成したとき。

下のコードの中の左端にある「(数字)．」は評価順序。

１．．．<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
．．．．<script type="text/javascript">
４．．．(
４．２．  tmp_jquery=jQuery;// ……(1)
４．．．)(
４．３．  function(){
４．３．    $=jQuery=tmp_jquery;// ……(2)
４．３．  }
４．．．);
．．．．</script>
５．．．<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
．．．．<script>
７．．．$(
７．６．  function(){
７．６．    alert(jQuery.fn.jquery);// ……(3)
７．６．  }
７．．．);
．．．．</script>

机上デバッグ開始。

１．で jQuery や $ が jQuery 1.7.1 へ。
２．は式なのですぐ実行される。tmp_jquery は jQuery 1.7.1
３．は ４．(関数を呼び出す式) の引数なので、すぐに評価されるけれど、関数なので呼び出されるまで実行されない。呼び出されるのは DOM が完成したとき。
５．で jQuery や $ が jQuery 1.2.3 へ。
６．は ７．(関数を呼び出す式) の引数なので、すぐに評価されるけれど、関数なので呼び出されるまで実行されない。呼び出されるのは DOM が完成したとき。

(HTML が最後まで読み込まれて DOM が完成する)

３．が呼び出されて ……(2) が評価される。式なのですぐに実行されて $ と jQuery は jQuery 1.7.1
６．が呼び出されて ……(3) が評価される。alert 関数を呼び出して jQuery 1.7.1 の jQuery.fn.jquery が表示される。

机上デバッグ終了。

お礼

詳細な説明ありがとうございます。

補足

詳細な解説ありがとうございます。

ただ、３．が実行されるのが「DOMが完成したとき。」と言うのが
理解できません。

例えば、
(式)(function(){$=jQuery=tmp_jquery;});
が

(式)($(function(){$=jQuery=tmp_jquery;}));のように
$()で囲まれていれば
DOMが完成したときと理解できるのですが、
囲まれていないのに、DOMが完成したときに呼ばれるのはなぜなのでしょうか？？

実行時の挙動を見ると説明して頂いたとおりだと思います。
ただ、私頭が弱いので、どうしても納得できないのです・・・。
ごめんなさい。