Javascript es6未捕获引用错误：未定义类

我会尽量保持简短

我的问题是一个典型的初学者问题。基本上，我正试图通过索引中的一个按钮实现一个

onClick=“function（）；”

。每次单击上述按钮，我都会得到一个

未捕获的引用错误：控制器未定义（…）索引。html:34

//Config.js\/
window.onload=config；
函数配置（）{
让控制器=新控制器（）；
}
//Config.js/\
类控制器{
构造函数（）{
//班级
设块=新块（）；
让视图=新视图（此）；
让页面=新页面（）；
}
spawnBlock（）{
this.view.drawBlock（page.getWidth（）/2，page.getHeight（）/2）；
}
}
//其他班级
类视图{
建造师（控制员）{
让canvas=document.getElementById（'canvas'）；
让pen=canvas.getContext（'2d'）；
设块=控制器；
}
牵引块（x，y）{
pen.beginPath（）；
pen.moveTo（0,0）；
pen.lineTo（x，y）；
笔划（）；
//Alt\/
//设posX=x；
//设posY=y；
}
}
类块{
构造函数（）{
// ...
}
// ...
}

指数
//（config（）{
//让控制器=新控制器（）；
// })();
* {
边际：0px；
填充：0px；
}
帆布{
宽度：700px；
高度：400px；
边框：纯黑1px；
}

点击我

您可以尝试在body onload事件中实例化控制器对象

---

您的控制器仅对

配置功能是本地的：

function config() {
    let controller = new Controller();
}

当您在HTML中引用此变量时，您需要一个全局变量，而不是上面的局部变量，这是不可访问的

一个简单的修复方法是在全局对象上声明变量：

function config() {
    window.controller = new Controller();
}

请注意，您可以使用而不是
load
事件，因为第一个事件触发得更快，但仍然是在解析DOM之后：

document.addEventListener("DOMContentLoaded", config);

我建议您阅读JavaScript中作用域的工作原理。您在
config
函数中创建了
controller
变量。此
控制器
变量是此函数的本地变量，不能在其外部访问

尝试将其从以下位置更改：

window.onload = config;

function config() {
    let controller = new Controller();
}

到

作为补充说明，通常认为最好不要在HTML中设置内联事件处理程序。我建议您阅读
addEventListener
。一个简单的例子：

let button = document.getElementById('button');

button.addEventListener('click', () => {
  controller.startBlock();
});

Javascript很奇怪，您可以将config（）函数下移到末尾，看看它是否有区别？“我会尽量保持简短。”–继续粘贴100多行源代码code@naomik哈哈，是的。至少我试过了，我已经有了一种感觉，正确的答案是这样的。非常感谢。我试图做一些类似的事情，但是使用var，在Controller类中只得到错误。看起来你不能在构造函数的正上方生成变量。现在我只需要弄清楚如何定义我的函数，并使它们可以从其他类中使用。
let button = document.getElementById('button');

button.addEventListener('click', () => {
  controller.startBlock();
});