创建对象的区别before/afterwindow.onload

Question

如下，我创建了一个显示"object1.msg"内容的函数displayMsg，它是在onload事件之后构建的，但它显示未定义。

但是如果我把

var object1 = new testObject("Hello");

在 window.onload 之前，无论 before/after displayMsg() 函数，它都有效。

这是为什么？这两者之间的程序执行顺序有什么区别？谢谢...

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

您是在一个函数内声明 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 2

您正在 window.onload 函数的范围内创建 object1 对象。这意味着您的显示消息函数中没有 object1。

您可以尝试将该对象作为参数传递给您的 displayMsg() 函数，或者将您的整个代码迁移到 onload 函数中。

编辑

只是为了回答您关于加载顺序的问题：您包含的每个脚本都会在浏览器加载后立即执行。使用 window.onload 会将该函数中的所有代码延迟到加载页面的每个脚本的位置。还要注意，您将脚本放入 html 文件的顺序 很重要 !

Answer 3

加载和呈现页面或元素（您可以将 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>

创建对象的区别before/afterwindow.onload

The difference between creating object before/after window.onload

javascript

object

onload