window.onloadの前後のオブジェクトの作成の違い

Question

以下、onloadイベントの後にビルドされる "object1.msg"の内容を表示する関数displayMsgを作成しますが、定義されていません。私はwindow.onload前

var object1 = new testObject("Hello"); 

を置けば

はしかし、どんなに前/後displayMsg（）関数は、それが動作します。

なぜですか？これらの2つのプログラムの実行順序の違いは何ですか？おかげで...

function testObject(msg) { 
    this.msg = msg; 
} 

function displayMsg() { 
    document.getElementById("msgbox").innerHTML = object1.msg; 
} 

window.onload = function() { 
    var object1 = new testObject("Hello"); 
    displayMsg(); 
} 

Answer 1

onLoadイベントは、ページまたは要素（DOM要素でonLoadを使用できます）が読み込まれてレンダリングされたときにトリガーされるため、インラインに配置されている残りのjavascriptコードは以前に読み込まれて実行されます。

おそらく、コードでは、onLoadコールバック内にオブジェクトインスタンス変数を定義しています。つまり、「object1」が範囲外です。

あなたはこれを試すことができます：

var object1; // Variable is defined in the global scope 
 

 
function testObject(msg) { 
 
    this.msg = msg; 
 
} 
 

 
function displayMsg() { 
 
    document.getElementById("msgbox").innerHTML = object1.msg; 
 
} 
 

 
window.onload = function() { 
 
    object1 = new testObject("Hello"); 
 
    displayMsg(); 
 
}

<div id="msgbox"></div>

Answer 2

あなたが関数内object1を宣言している、したがって、それは、その関数のスコープにあるのは、別のスコープからアクセスすることはできません。

これを試してください：あなたはwindow.onload関数のスコープであなたのobject1オブジェクトを作成している

function testObject(msg) { 
    this.msg = msg; 
} 

function displayMsg(object) { 
    document.getElementById("msgbox").innerHTML = object.msg; 
} 

window.onload = function() { 
    var object1 = new testObject("Hello"); 
    displayMsg(object); 
} 

Answer 3

。 これは、表示メッセージ機能にobject1がないことを意味します。

オブジェクトをパラメータとしてdisplayMsg()関数に渡すか、コード全体をonload関数に移行することができます。

EDIT

ただ、ロード順序のあなたの質問をawnserする：あなたは含めるすべてのスクリプトは、そのブラウザによってロードされるとすぐに実行されます。 window.onloadを使用すると、その関数のすべてのコードがページのすべてのスクリプトがロードされるポイントまで遅延します。また、あなたのhtmlファイルにスクリプトを書き込む順番は、であることに注意してください。