使用Javascript函数对象原型包装在IIFE中定义在DomContent加载在HTML中给出错误

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>

它给出错误：

类型错误：更改数据未定义

Answer 1

您正在 IIFE 中定义和初始化changedata，并且您知道使用var在函数内声明的变量的作用域仅为该函数，在函数外部不可见。

因此，当您var changedata = new ChangeData();在IIFE中执行此操作时，它在全球上下文中是不可见的，因此您会TypeError: changedata is undefined。

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

Answer 2

您正在尝试访问超出范围的变量。您可以创建各种getter，并调用它来访问IIFE中的"私有"变量。像这样：

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

在您的 IIFE 结束时可能会起作用。

然后，您可以使用DomLoad.getChangedata().change()访问您的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 不返回任何内容，因此DomLoadundefined。此外，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>