window.onload()
Windowオブジェクト
window.onload()について説明する前にwindowオブジェクトについてです。
console.log(window);まずは見てみましょう。
つらつらとwindowオブジェクトが表示されたかと思います。
window(ブラウザ)が持っているプロパティやメソッドですね。
基礎編でお世話になった、alert()やconfirm()などもあります。
ブラウザをタブで表示している場合にはタブ一つ一つがwindowオブジェクトとして認識されます。
window.alert('アラート1');
alert('アラート2');window.alert()を実行してみます。
オブジェクトのメソッドを呼ぶとき、オブジェクト.メソッド名()で呼び出すのが基本ですが、
windowオブジェクトのメソッドを呼び出すときはwindow.を省略できます。
ですので、alert()のみでも実行できます。
window.onload()
では、window.onload()についてみていきましょう。
// window オブジェクトを表示してみる
console.log(window);
// window オブジェクトの alert() メソッドの実行
window.alert('アラート1');
// 読み込まれたときに呼ばれる関数を登録する
window.onload = function() {
alert('ページが読み込まれました。');
console.log('ページが読み込まれました。');
}
// window. を省略できる
alert('アラート2');実行結果は
アラート1 -> アラート2 -> ページが読み込まれました。
という順番になりました。
さて、windowオブジェクトを見てみましょう。
実は下の方に行くと、onloadという項目があります。
上図はwindow.onload = function() {...}を追記する前です。
下図がwindow.onload = function() {...}を追記したものです。
onload: null だったものが、onload: f() ...となっています。
実はwindowオブジェクトはもともとonloadというプロパティを持っています。
このプロパティはwindowの読み込みが完了したときに呼び出す関数として、windowに登録されているものになります。
onloadプロパティに関数を登録することで、windowの読み込みが完了したとき、登録されている関数を呼び出している、ということになります。
プロパティ？メソッド？
さて、windowオブジェクトのプロパティがメソッドに代わってしまいました。
少し検証してみましょう。
// personオブジェクト
const person = {
name: 'daiki',
called: 'と呼ばれています。',
};
// personオブジェクトの表示
console.log(person);
console.log(person.called);
// person.called プロパティに代入
person.called = person.name + person.called;
console.log(person.called);
// person.calledプロパティに匿名関数を代入
person.called = function() {
return this.name + 'と呼ばれています。';
}
console.log(person);
console.log(person.called);
console.log(person.called());personオブジェクトを作ってみました。
nameとcalledというプロパティをもっています。
実行結果の右側に書いてあるのは、実行されたファイル名:実行された行となります。
8行目の結果では、 {name: "daiki", called: "と呼ばれています。"} となっているように、どちらもプロパティとなっています。
ですので、9行目の実行結果は "と呼ばれています。" になるのは正しそうですね。
12行目の実行結果は "daikiと呼ばれています。" になっています。
これは11行目でcalledプロパティに代入し直したからです。
14行目ではcalledプロパティに匿名関数を代入しています。
17行目の実行結果を見ると {name: "daiki", called: f} となりました。
personのcalledプロパティがf(functionの略)になったということですね。
つまり、personのcalledプロパティがcalledメソッドに代わったということです。
ですので、18行目のではメソッドの内容が表示され、19行目ではメソッドの実行結果が表示されたということになります。
まとめ
window.onload()はウィンドウが読み込みが完了されたときに呼び出されるwindowオブジェクトの関数である。
オブジェクトのプロパティは関数を代入するとメソッドに代わる。