JavaScriptの基本文法についての質問です。

Question

JavaScriptを最近勉強を始めた者です。

以下の説明を受けたのですが、イマイチ理解ができすご質問させていただきました。

① 以下は window のロードが終わってから 「//何らかの処理」を実行するという説明を受けました。

window.onload = function() {
// 何らかの処理
}

② 以下の場合は count という変数に関数を代入していると説明を受けました。

var count = 0;
var count = function(){
      count++
}

素人の感覚だと、①は②と同じように window クラスの onload という public変数に 「何らかの処理をしている関数」 を代入しているように感じてしまうのですが、①と②は何が違うのでしょうか？
var がついているかついていないかの違いで処理が変わるのでしょうか？

よろしくお願いします。

Comments

[m.ts10806]

タイトルには要件を書いて下さい。 https://teratail.com/help/question-tips#questionTips3-1 タイトルから質問内容が想像できないもの、タイトルと質問内容が食い違っているものはスムーズな回答を得られなくなります。

Answer 1

onloadの処理に関しては、なにをもってロードされたかを理解しないと
処理がブレるかもしれません

window.addEventListener('load', function(e){
  console.log(1);
});
document.addEventListener('readystatechange', function(e){
 if(e.target.readyState=="complete") console.log(2);
});
window.addEventListener('DOMContentLoaded', function(e){
  console.log(3);
});

上記3→2→1の順で処理されます

Answer 2

JavaScript入門講座 イベントハンドラ

ページをロードしたり、フォームのボタンをクリックするといった特定の動作が発生したタイミングをイベントといいます。
イベントハンドラはこのイベントの取得を行い、設定した処理を実行することができます。

普通のfunctionは実行するためにどこかで呼び出してやらなければいけませんが、イベントハンドラは特定の出来事が発生すると自動的に呼び出されます。

Answer 3

=が代入を表し、functionは関数を作っているので、「関数を代入している」という理解であっていると思います。

window のロードが終わってから 「//何らかの処理」を実行するというのは、ブラウザの実装として、windowのロードが終わったときに、window.onload()呼び出されるので、結果として、「何らかの処理」が実行される、ということになるかと思います。

Comments

[takeshi1907]

window.onload() という関数に function() という関数を先に代入しておいて、windowのロードが終わったときに、window.onload()呼び出されるという事でしょうか。
ライフサイクル的なことを理解しておらず、申し訳ありません。

[papinianus]

その理解で良いと思います。
あやまることはないと思います。納得できないことにこだわるのは私は悪いこととは思いません。

:補足
他の方も書いておられるとおり、厳密にはonloadはイベントハンドラというもので、画面のロードが終わったときにwindowで「ロードが終わりました」というイベントが起こり、そのときonloadに登録された関数を実行されることになります。

[takeshi1907]

大分理解が深まりました。丁寧にありがとうございましたmm

Answer 4

①はイベント発生時に実行される処理

• window.onload

②は無名関数

• 無名関数 関数式と関数宣言

onloadは変数ではなくイベントそのものを指します。