Question

如下所示，我创建了一个显示“object1.msg”内容的displayMsg函数，该函数是在onload事件之后构建的，但它显示为undefined。

但是，如果我把

var object1 = new testObject("Hello");

在window.onload之前的

，无论在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

当加载并呈现页面或元素（您可以使用带有DOM元素的onLoad）时，会触发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>

window.onload之前/之后创建对象的区别

3 个答案: