人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

question:1184576878で質問した者です。
また新たな疑問が出てしまいました。助けて下さい。


var x = "a";
var hoge = function(){alert(x)}

setTimeout("hoge();",3000);
setTimeout(hoge,6000);

x = x + "b";
hoge = function(){alert(x+"c")}
hoge();


「abc」「abc」「ab」と返ってくる理由が分かりません。よろしくお願いします。


●質問者: Lhankor_Mhy
●カテゴリ:ウェブ制作
✍キーワード:ABC hoge question:
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kn1967
●100ポイント

まずは動作を時系列に追っていきましょう。

1)var x = "a"; 初期値セット

2)var hoge = function(){alert(x)} 関数セット

3)setTimeout("hoge();",3000); タイマーセット

4)setTimeout(hoge,6000); タイマーセット

5)x = x + "b"; xの中身が"ab"になった

6)hoge = function(){alert(x+"c")}

このアラートが呼び出されてもxの中身に変化は一切無い。

7)hoge(); ここで1回目のアラート出力がなされる。

ここではhogeに()が付いているので上記6)が呼び出された形となり出力はabc

8)3000経って3)でセットしたタイマーが起動

ここでも()が付いているので6)が呼び出されて出力はabc

9)6000経って4)でセットしたタイマーが起動

ここでは()が付いていないので事前にセットした値2)の式が用いられxの中身であるabが出力される


時系列に追っていった結果として

a)hoge はvarで定義された関数リテラルを呼び出す。

b)hoge() は最後に定義された時点での関数を呼び出す。

という違いが判ってくるかと思います。

専門用語では「関数ポインタ」と呼びますが、そこまで話だすと長くなるので、ひとまず違いがあるという点までを検証してください。

◎質問者からの返答

あ、なるほど。分かりました。


2 ● znz
●100ポイント

変数の評価のタイミングがわかっていないように思います。

順番に説明を付けてみたので、それぞれのタイミングでxとhogeは何を指していて、何が実行されるのかを考えてみるとわかるでしょうか。

◎質問者からの返答

分かりました。有難うございます。


3 ● ardarim
●100ポイント
?var x = "a";
?var hoge = function(){alert(x)}

?setTimeout("hoge();",3000);
?setTimeout(hoge,6000);

?x = x + "b";
?hoge = function(){alert(x+"c")}
?hoge();

最初に???が実行されます。


?で、3秒後に "hoge();" が評価されるようセットされますが、文字列としてセットされますので、この時点で hoge の内容が何であるかはまったく意味がありません。3秒後に文字列 "hoge();" がスクリプトとして評価され、そのときに初めて hoge が参照されます。


?で、6秒後に hoge が評価されるようセットされますが、これは文字列ではありません。この時点でhoge=function(){alert(x)}ですので、setTimeout(function(){alert(x)},6000);を実行するのと等価です。したがって、約6秒後にfunction(){alert(x)}が実行されます。


?で x に "ab" がセットされます。


?でhogeの内容がfunction(){alert(x+"c")}に置き換わります。


?が実行されるとき、?で定義されたhogeが実行されますので、?でセットされたxの値 "ab" + "c" がまず表示されます。


約3秒後、文字列としての "hoge();" がスクリプトとして評価されます。このとき、hogeは最後に?でセットされた関数内容が有効になっています。したがって、"abc" が表示されます。


約6秒後、function(){alert(x)}が実行されます。"ab"が表示されます。


したがって、「abc」「abc」「ab」という表示になります。

◎質問者からの返答

理解できました。有難うございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ