从函数属性访问对象属性;不适用于Firefox

Accessing object property from function property doesn't work in Firefox

本文关键字：属性 不适用 适用于 Firefox 对象 函数 访问      更新时间：2023-11-18

下面的代码适用于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";
}
};

提前谢谢。

编辑：解决方案可以独立运行（JSfiddle），但当我在项目中使用代码时，它会失败。这完全没有道理。请参阅此屏幕截图mashup：图像链接

编辑#2：

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

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

就像您在引用方法时所做的那样，您只需要在引用"overlay"时添加对象范围。

所以，在你的函数中，只要做"ol.foverlay.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-read时调用的init类型方法中），两者都可以。

假设页面上有一个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();

并且不是这样（这将使各种函数中的this不引用ol）：

var openFn = ol.open();
openFn();
// etc.
相关文章：