ここから本文です

javascriptを勉強する中で疑問点があり質問させて頂きます。 現在、コールバック...

sat********さん

2019/6/2319:27:22

javascriptを勉強する中で疑問点があり質問させて頂きます。
現在、コールバック関数について勉強しており以下のようなサンプルプログラムを作成しました。

(htmlファイルとjsファイルは同階層に置いています。)

・htmlファイル(test.html)
<!DOCTYPE html>
<head>
<title>test</title>
<meta charset="SJIS">
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<input type="button" value="test" onclick="ExecuteCallback(CallbackFunc);">
</body>
</html>

・jsファイル(test.js)
// コールバック関数を実行する関数(①)
function ExecuteCallback(callback) {
console.log('ExeCutecallback');
callback();
}

// ExecuteCallback()に渡されるコールバック関数(②)
var CallbackFunc = function() {
console.log('CallbackFunc');
}

// ExecuteCallback()にコールバック関数を渡して実行する(③)
ExecuteCallback(CallbackFunc);


上記プログラムを実際に動作させたところ

初期表示時
ExeCutecallback
CallbackFunc
がコンソールに表示される

ボタン押下時
ExeCutecallback
CallbackFunc
がコンソールに表示される

という結果となりました。
ここで以下の疑問が浮かんでしまいました。

初期起動時は
②⇒③⇒①の順に読み込まれる認識ですので結果に納得できているのですが

ボタン押下時は
①のみが読み込まれる認識ですのでコールバック関数を取得できずエラーとなると予測しておりました。

結果としてボタン押下時もコールバック関数が取得できているので、私の認識がどこで誤っているかご指摘頂けますと幸いです。

初歩的な質問で大変申し訳ございませんが、有識者の皆様のご回答が頂けますと幸いです。
何卒、よろしくお願いいたします。

閲覧数:
26
回答数:
2

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2019/6/2418:23:53

> ボタン押下時は
> ①のみが読み込まれる認識ですので

この認識が間違いですね。
そもそも,
それだと矛盾を含んでしまいますよ。



関数名();
【例】ExecuteCallback(CallbackFunc);

これは
「その関数名の関数を "実行せよ"。」
という文です。

【例】で言えば
「関数 ExecuteCallback を "実行せよ"。」
という文です。

決して
「その関数名の関数を "読み込め"。」
ではありません。


そもそも "読み込め" であれば
何が矛盾するのかと言えば
読み込んでいないものを名指しで呼べないでしょう?

もし
「関数 ExecuteCallback を "読み込め"。」
という命令を出したときに
関数 ExecuteCallback が読み込まれていなければ
関数 ExecuteCallback って何???
ということになってしまいます。



スクリプトの読み込みの開始は
<script type="text/javascript" src="./test.js"></script>
がブラウザに読み込まれた直後です。

スクリプトの読み込みの完了はいつかわかりませんが
ご質問で書かれていらっしゃる JS の場合であれば

// ExecuteCallback()にコールバック関数を渡して実行する(③)
ExecuteCallback(CallbackFunc);

が最後までロードされた時点です。

この文が読み込まれたときに
それ以上の(それより上の)関数や変数はすでに読み込まれています。

すなわち

// ExecuteCallback()に渡されるコールバック関数(②)
var CallbackFunc = function() {
console.log('CallbackFunc');
}

も読み込まれています。



さらに言えば,
HTML内の DOMエレメント のレンダリングは
HTMLファイルの上から順番に行われますが
外部 JSファイル の読み込みタグがあれば
そこで一旦レンダリングが中止されて
ブラウザは外部のJavaScriptファイルを解析しに行きます。


「【HTML】外部ファイル化されたJavaScriptの読み込み方と記述場所」
https://konoti.com/website/javascript/read-point.html
> レンダリングはHTMLファイルの上から順番に行います。
> そして、JavaScriptファイルの読み込みがあれば
> レンダリングを一旦止めて外部のJavaScriptファイルを
> 解析しに行きます。


結局のところ,
<script type="text/javascript" src="./test.js"></script>
が書き込まれてあった場合
その「./test.js」が確かに存在していたならば,
ボタンをクリックできる状態になっている時点で必ず

// ExecuteCallback()に渡されるコールバック関数(②)
var CallbackFunc = function() {
console.log('CallbackFunc');
}

は読み込まれ,
解析まで済んでいます(ロード & 定義済み です)。

質問した人からのコメント

2019/6/28 21:58:41

皆様ご回答ありがとうございます。
glo*****さんをベストアンサーに選ばせて頂きます。

ベストアンサー以外の回答

1〜1件/1件中

yay********さん

2019/6/2319:57:18

クリック時に

>ExecuteCallback(CallbackFunc);

と CallbackFunc オブジェクト指定しているのだから
グローバルで定義している
CallbackFunc が呼ばれるのことの何が不思議なのでしょう?

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる