使用包含在IIFE中的Javascript函数对象原型定义在HTML中的DomContentLoaded中给出错误

Question

我定义了一个IIFE，并在其中定义了一个定义的功能对象及其原型，它用DomContentLoaded包装但我无法在html中使用它。以下是js文件中的代码：

const DomLoad = (function(){
function ChangeData() {
    this.active = 'blue-color';
}
ChangeData.prototype.change = function(imagename, idname, colorname) {
    document.getElementById(this.active).classList.remove("active");
    this.active = idname;
    document.getElementById(this.active).className += " active";   
    document.getElementById("text").innerHTML = colorname;            
    document.getElementById("carimage").src='assets/'+imagename+'.jpg';
};     
var changedata = new ChangeData();})();document.addEventListener("DOMContentLoaded", DomLoad);

以下是HTML文件中的代码：

<div class="color-circle" id="grey-color" onclick="changedata.change('grey','grey-color', 'Grey')"></div>

这是错误的：

TypeError：changedata未定义

Answer 1

您正在IIFE中定义和初始化changedata，并且如您所知，使用var在函数内声明的变量仅限于该函数，并且在其外部不可见。

因此，当你在IIFE中执行var changedata = new ChangeData();时，它在全局范围内是不可见的，因此你得到TypeError: changedata is undefined。

还有一个问题是你将执行IIFE的结果分配给DomLoad，这将是undefined，因为你没有返回任何东西，实际上它应该是函数引用本身。

Answer 2

您正在尝试访问超出范围的变量。您可以创建一个排序的getter，并调用它来访问IIFE内部的“private”变量。就像是：

return {
  getChangedata: function() {
    return changedata;
  }
}

在你的LIFE结束时可能会有效。

然后，您可以使用change访问您的DomLoad.getChangedata().change()方法。

Answer 3

这对我有用

"use Strict";
(function(global){
function ChangeData() {
    this.active = 'blue-color';
}

ChangeData.prototype.change = function(imagename, idname, colorname) {
    document.getElementById(this.active).classList.remove("active");
    this.active = idname;
    document.getElementById(this.active).className += " active";   
    document.getElementById("text").innerHTML = colorname;            
    document.getElementById("carimage").src='assets/'+imagename+'.jpg';
};     

global.changedata = new ChangeData();
document.addEventListener("DOMContentLoaded", ChangeData,false);
})(window);    

Answer 4

你的IIFE没有返回任何东西，所以DomLoad是undefined。 changeData也是IIFE中的局部变量，无法从内联事件处理程序访问它。你应该做任何一件事

const changedata = (function(){
    function ChangeData() {
        this.active = 'blue-color';
    }
    ChangeData.prototype.change = function(imagename, idname, colorname) {
        document.getElementById(this.active).classList.remove("active");
        this.active = idname;
        document.getElementById(this.active).className += " active";   
        document.getElementById("text").innerHTML = colorname;            
        document.getElementById("carimage").src='assets/'+imagename+'.jpg';
    };     
    return new ChangeData();
});

<div class="color-circle" id="grey-color" onclick="changedata.change('grey','grey-color', 'Grey')"></div>

要么

function DomLoad(){
    function ChangeData() {
        this.active = 'blue-color';
    }
    ChangeData.prototype.change = function(imagename, idname, colorname) {
        document.getElementById(this.active).classList.remove("active");
        this.active = idname;
        document.getElementById(this.active).className += " active";   
        document.getElementById("text").innerHTML = colorname;            
        document.getElementById("carimage").src='assets/'+imagename+'.jpg';
    };     
    const changedata = new ChangeData();
    document.getElementById("grey-color").addEventListener("click", function(event) {
        changedata.change('grey','grey-color', 'Grey');
    });
}
document.addEventListener("DOMContentLoaded", DomLoad);

<div class="color-circle" id="grey-color"></div>