es6未捕获的ReferenceError：未定义类
[英]es6 Uncaught ReferenceError: class is not defined
问题描述
I'll try to keep this short. 
我会尽量保持这个简短。
My problem is a typical beginner's problem. 我的问题是典型的初学者问题。 Basically, I'm trying to pull off an onClick="function();" 基本上，我试图拉出onClick="function();" with a button in my index. 我的索引中有一个按钮。 Every time click on said button I get a Uncaught ReferenceError: controller is not defined(…) index.html:34 每次点击所述按钮我都会得到一个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>
Whether I write onClick="class.function();" 我是否写onClick="class.function();" or simply onClick="function();" 或者只是onClick="function();" , it won't work. ，它不会起作用。 When I try the former option, it tells me the class is not defined. 当我尝试前一个选项时，它告诉我类未定义。 And when I try the latter option it tells me the function is not defined. 当我尝试后一个选项时它告诉我函数没有定义。
I've asked a few classmates and none of them could figure it out. 我问了几个同学，但没有人能搞清楚。 One got it to work with syntax you'd use with the old JavaScript, but that's not what I'm aiming for. 有人用它来处理你用旧JavaScript的语法，但这不是我的目标。
I've tried Stachoverflow and google in general but came up with nothing that helped, or that was understandable. 我已经尝试了Stachoverflow和google，但是没有任何帮助，或者这是可以理解的。 I'm using nothing like Jquery or any plugins. 我没有像Jquery或任何插件那样使用任何东西。 Just html, css and JavaScript. 只是html，css和JavaScript。
Thanks for the read. 谢谢你的阅读。 Perhaps it was a bit too much for such a simple question but I'd rather be thorough than looked over. 也许对于这么简单的问题来说有点太多了，但我宁愿彻底而不是看过去。
Thank you in advance if you reply 如果您回复，请提前感谢您
3 个解决方案
解决方案1
1 已采纳 2016-12-14 21:43:46
I would recommend reading about how scoping works in JavaScript. 我建议阅读有关如何在JavaScript中使用作用域的内容。 You created your controller variable inside the config function. 您在config函数中创建了controller变量。 This controller variable is local to this function and cannot be accessed outside it. 此controller变量是此函数的本地变量，无法在其外部访问。
Try changing it from: 尝试更改它：
window.onload = config;
function config() {
let controller = new Controller();
}
to 至
window.onload = config;
let controller;
function config() {
controller = new Controller();
}
As a side note, it's generally considered better practice to not set inline event handlers in your HTML. 作为旁注，通常认为更好的做法是不在HTML中设置内联事件处理程序。 I would recommend reading up on addEventListener . 我建议阅读addEventListener 。 A minimal example: 一个最小的例子：
let button = document.getElementById('button');
button.addEventListener('click', () => {
controller.startBlock();
});
解决方案2
0 2016-12-14 21:41:11
You could try to instantiate the controller object in body onload event. 您可以尝试在body onload事件中实例化控制器对象。
<body onload="init()" >
function init() {
controller = new Controller();
document.getElementById("button").addEventListener("click", controller.spawnBlock());
}
Doing this, you will guarantee that all the document is loaded before running any scripts. 这样做，您将保证在运行任何脚本之前加载所有文档。
Hope that will help. 希望有所帮助。
解决方案3
0 2016-12-14 21:42:26
Your controller is local to the config function only: 您的控制器仅对config功能是本地的：
function config() {
let controller = new Controller();
}
When you reference this in your HTML, you need a global variable, not the above local variable, which is not accessible. 当您在HTML中引用它时，您需要一个全局变量，而不是上面的本地变量，这是不可访问的。
A simple fix is to declare your variable on the global object: 一个简单的解决方法是在全局对象上声明您的变量：
function config() {
window.controller = new Controller();
}
Note that you can use the DOMContentLoaded instead of the load event, since the first fires sooner, but still after the DOM is parsed: 请注意，您可以使用DOMContentLoaded而不是load事件，因为第一个会更快地触发，但仍然在解析DOM之后：
document.addEventListener("DOMContentLoaded", config);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.