なぜfunc()で動き、funcで動かないのか。

質問

以前良く似た質問をしましたが、また疑問点が出たので質問します。
前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。

var img = new Image();
window.onload = function() {
img.onload = func;
}
function func() {
（省略）
}

その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。
しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。

window.onload = function() {
document.getElementById("result1").onload = result1;
document.getElementById("result2").onload = result2();
}

function result1() {
document.getElementById("result1").innerHTML = "result1";
}
function result2() {
document.getElementById("result2").innerHTML = "result2";
}

<div id="result1"></div>
<div id="result2"></div>

onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか？

あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。

window.onload = function() {
document.getElementById("result1").onload = result1;
document.getElementById("result2").onload = result2();
}

function result1() {
this.innerHTML = "result1";
}
function result2() {
this.innerHTML = "result2";
}

<div id="result1"></div>
<div id="result2"></div>

両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか？

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

function func(){
alert('func');
}

これは、funcという名前の関数を「定義」するものです。

そして

func();

と書くと、これはfuncという名前の関数を「実行」します。
ですが、

func

だけでしたら、それは関数を実行するのではなく、「funcという名前の関数を意味する」ということになります。

----------
window.onloadというのは、
windowに対してloadというイベントが発生したときにonloadに指定された関数が実行されます。

----------
window.onload=func;とするとfuncという名前の関数がwindowのloadイベントと同時に「実行」されます。

window.onload=func();とすると
func()はその場で実行して、その戻り値がonloadに入れられます。
（funcにはreturnが明示的に書かれていませんので、undefinedになります）
windowのloadイベントと同時にonloadに入れられたundefinedを「実行」しようとしますが、undefinedは実行できませんから、結局何もしません。

---------------
> function result1() {
> document.getElementById("result1").innerHTML = "result1";
> }
> function result2() {
> document.getElementById("result2").innerHTML = "result2";
> }
この２つの関数は、idがresult1、result2のエレメントのinnerHTMLを書き換える関数を「定義」しているものです。

> window.onload = function() {
> }
これは関数の定義とonloadへの代入を同時にやってるだけですので、説明は不用だと思います。
これによりwindowのloadイベントでこの関数の中身が実行されます。

> window.onload = function() {
> document.getElementById("result1").onload = result1;
> document.getElementById("result2").onload = result2();
> }

２行目のresult2から説明します。
> document.getElementById("result2").onload = result2();
かっこが付いているので、result2という関数を「実行」し、その戻り値をdocument.getElementById("result2")のonloadに代入します。
このときに実行していますから、innerHTMLの書き換えが完了しています。

result2という関数は戻り値はundefinedですから、
document.getElementById("result2")のloadイベントでは何もしないことになります。

１行目、
> document.getElementById("result1").onload = result1;
window.onloadの件で説明した様に、document.getElementById("result1")のloadイベントの時にresult1を実行しなさいと言う指示です。

そこで問題になるのがloadイベントの発生がいつ起きるのか、ということですが、
divエレメントはloadイベントを発生させません。
ですから、いつまで経ってもresult1という関数は実行されないままになります。
（２行目の方もundefinedを代入していますが、実は、それを実行しようともしません）

<img>を使う場合などでも、読み込み完了後（loadイベント発生後）に
onloadを指定しても、すでにloadが完了していますから、それ以上関数が呼び出されることはありません。

window.onloadが早いか、img.onloadが早いからそのときの状況次第でかわります。
onloadに代入するときは、loadイベントが発生する前か後かも注意してください。

---------------
> function result1() {
> this.innerHTML = "result1";
> }
このときのthisはwindowになります。
window.innerHTMLに何かを入れても、通常は目に見える変化はありません。

回答No.3

yambejp

やるならこう

<script>
window.onload = function() {
result1();
document.getElementById("result2").func=result2;
document.getElementById("result2").func();
}

function result1() {
document.getElementById("result1").innerHTML = "result1";
}
function result2() {
this.innerHTML = "result2";
}
</script>

<div id="result1">test</div>
<div id="result2">test</div>

resulut1()関数を呼ぶか、オブジェクトにメソッドを設定してから
実行する。

回答No.2

steel_gray

#1です。
一応 this に関する解説です。
http://www.google.co.jp/notebook/public/07126523835141651794/BDQO8IgoQgsyp360i

回答No.1

steel_gray

document.getElementById("result1").onload = result1
≒
<div id="result1" onload="result1()"></div>
って意味がないですよね。
(onloadイベントが発生するのって他のリソースを読み込むimgやiframe以外だとページそのものを示すbody(window)だけです。)
イベントが発生しないのでresult1が実行される事もありません。

document.getElementById("result2").onload = result2();
は、()付きですからdivのonloadではなくwindow.onloadでこの行が実行されるときにresult2が実行されます。

function内でのthisについてはよくわかっていないのでパス。
少なくともocument.getElementById("result1")等ではありません。
<input onclick="result1(this)">
などど書くと呼び出したobjectを渡せますが、関数内でthisと書いても呼び出し元のobjectが得られるわけではありません。