我会尽量保持简短。
我的问题是典型的初学者问题。基本上，我试图在我的索引中使用一个按钮来实现 onClick="function();"。每次点击上述按钮时，我都会收到一个 Uncaught ReferenceError: controller is not defined(...) index.html:34
// Config.js \/
window.onload = config;
function config() {
let controller = new Controller();
}
// Config.js /\
class Controller {
constructor() {
// classes
let block = new Block();
let view = new View(this);
let page = new Page();
}
spawnBlock() {
this.view.drawBlock(page.getWidth() / 2, page.getHeight() / 2);
}
}
// The other classes
class View {
constructor(Controller) {
let canvas = document.getElementById('canvas');
let pen = canvas.getContext('2d');
let block = Controller;
}
drawBlock(x, y) {
pen.beginPath();
pen.moveTo(0, 0);
pen.lineTo(x, y);
pen.stroke();
// Alt \/
// let posX = x;
// let posY = y;
}
}
class Block {
constructor() {
// ...
}
// ...
}<!DOCTYPE html>
<!-- V 0// -->
<html>
<head>
<title>Index</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="script/Block.js"></script>
<script type="text/javascript" src="script/View.js"></script>
<script type="text/javascript" src="script/Controller.js"></script>
<script type="text/javascript" src="script/dump/page.js"></script>
<script type="text/javascript" src="script/config.js"></script>
<script type="text/javascript">
// (config() {
// let controller = new Controller();
// })();
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
canvas {
width: 700px;
height: 400px;
border: solid black 1px;
}
</style>
</head>
<body>
<center>
<canvas id="canvas"></canvas>
<br><button id="button" onClick="controller.spawnBlock();"> Click me </button>
<!-- /\ Uncaught ReferenceError: /\ -->
</center>
</body>
</html>无论我写 onClick="class.function();" 还是简单地写 onClick="function();"，它都不会起作用。当我尝试前一个选项时，它告诉我类未定义。当我尝试后一个选项时，它告诉我函数未定义。
我问过几个同学，都没弄明白。有人让它可以使用您在旧 JavaScript 中使用的语法，但这不是我的目标。
我一般都尝试过 Stachoverflow 和谷歌，但没有找到任何有帮助或可以理解的东西。我没有使用 Jquery 或任何插件。只是 html、css 和 JavaScript。
感谢阅读。对于这样一个简单的问题，也许有点太多了，但我宁愿彻底而不是看一遍。
如有回复先谢谢
最佳答案
我建议阅读 JavaScript 中作用域的工作原理。您在 config 函数中创建了 controller 变量。此 controller 变量是此函数的本地变量，无法在其外部访问。
尝试将其更改为:
window.onload = config;
function config() {
let controller = new Controller();
}
到
window.onload = config;
let controller;
function config() {
controller = new Controller();
}
附带说明一下，通常认为最好不要在 HTML 中设置内联事件处理程序。我建议阅读 addEventListener。一个最小的例子:
let button = document.getElementById('button');
button.addEventListener('click', () => {
controller.startBlock();
});
关于javascript - es6 未捕获引用错误 : class is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41152503/