Javascript 从函数属性访问对象属性不需要'；我不能在Firefox中工作

下面的代码适用于Chrome和IE（8），但firefox表示“覆盖未定义”。 使用this.overlay或[this.overlay]也不起作用。造成这种差异的原因是什么？如何在Firefox中修复

守则：

var ol = {
overlay: document.getElementById("overlay"),
build: function(e){
    //todo: build elements dynamically
},
open: function(){
    overlay.style.display = "block";
    centerVertically();
    ol.build();
},
close: function(){
    overlay.style.display = "none";
}
};

提前谢谢

编辑： 解决方案是独立工作的（），但当我在项目中使用代码时，它失败了。这完全没有道理。请参阅此ScreenCapMashup：

编辑#2:

将脚本标记移动到DOM的底部修复了所有问题。我不知道为什么我没有想到这一点。这可能是从一开始就存在的问题-Chrome和IE只是更好地处理我的愚蠢，即使有关闭问题

---

但是，由于我收到了您的回复，我现在编写了更安全的代码，并且知道如何正确访问对象内部的对象属性。谢谢

这在所有浏览器中都可以正常工作，假设页面上有一个ID为

overlay

的元素：

var ol = {
    overlay: document.getElementById("overlay"),
    build: function (e) {
        //todo: build elements dynamically
    },
    open: function () {
        this.overlay.style.display = "block";
        this.centerVertically();
        this.build();
    },
    close: function () {
        this.overlay.style.display = "none";
    },
    centerVertically: function () {
        // snip
    }
};

只要调用如下函数：

ol.open();
// or
ol.close();
// or
ol.build();

和不这样（这将使各种函数中的

此

不引用

ol

）：

---

这在所有浏览器中都可以正常工作，假设页面上有一个ID为overlay的元素：

var ol = {
    overlay: document.getElementById("overlay"),
    build: function (e) {
        //todo: build elements dynamically
    },
    open: function () {
        this.overlay.style.display = "block";
        this.centerVertically();
        this.build();
    },
    close: function () {
        this.overlay.style.display = "none";
    },
    centerVertically: function () {
        // snip
    }
};

只要调用如下函数：

ol.open();
// or
ol.close();
// or
ol.build();

和不这样（这将使各种函数中的

此

不引用

ol

）：

---

正如引用方法时所做的那样，在引用“overlay”时只需添加对象范围

所以在你的函数中只需执行“ol.overlay.style.display”就可以了

var ol = {
    overlay: document.getElementById("overlay"),
    build: function(e){
        //todo: build elements dynamically
    },
    open: function(){
        ol.overlay.style.display = "block";
        centerVertically();
        ol.build();
   },
   close: function(){
        ol.overlay.style.display = "none";
   }
};
ol.open();

按照现在的方式，它正在寻找“ol”对象范围之外的全局JS变量

编辑正如@Matt Ball在下面的评论中所提到的（我想补充一下）。您应该确保只有在DOM完成加载后才能获得“overlay”元素

---

您可以通过document.ready模式实现，也可以在“ol”函数中实现延迟加载模式。我建议使用document.ready模式，并将“ol”对象更改为覆盖默认值为null，然后在document ready时定义它（或者将它放在document ready时调用的init类型方法中），这两种方法都可以

正如引用方法时所做的那样，在引用“overlay”时只需添加对象范围

所以在你的函数中只需执行“ol.overlay.style.display”就可以了

var ol = {
    overlay: document.getElementById("overlay"),
    build: function(e){
        //todo: build elements dynamically
    },
    open: function(){
        ol.overlay.style.display = "block";
        centerVertically();
        ol.build();
   },
   close: function(){
        ol.overlay.style.display = "none";
   }
};
ol.open();

按照现在的方式，它正在寻找“ol”对象范围之外的全局JS变量

编辑正如@Matt Ball在下面的评论中所提到的（我想补充一下）。您应该确保只有在DOM完成加载后才能获得“overlay”元素

---

您可以通过document.ready模式实现，也可以在“ol”函数中实现延迟加载模式。我建议使用document.ready模式，并将“ol”对象更改为覆盖默认值为null，然后在document ready时定义它（或者将它放在document ready时调用的init类型方法中），这两种方法都可以

这两种解决方案似乎都是独立的。在这个fiddle（）中，我使用了这两种样式，它们工作正常。但是，当我在我的网页中使用它们时，即使在我的DOM中也找不到“overlay”元素。我的钱在于，您在DOM就绪之前调用此代码，或者至少

标记位于网页中ID为

overlay

的元素之前。fiddle的JS在窗口加载时运行，在DOM就绪之后运行。两种解决方案似乎都是独立工作的。在这个fiddle（）中，我使用了这两种样式，它们工作正常。但是，当我在我的网页中使用它们时，即使在我的DOM中也找不到“overlay”元素。我的钱在于，您在DOM就绪之前调用此代码，或者至少

标记位于网页中ID为

overlay

的元素之前。fiddle的JS在DOM就绪之后运行在窗口加载上。