es6未捕获的ReferenceError：未定义类

Question

我会尽量保持这个简短。

我的问题是典型的初学者问题。 基本上，我试图拉出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和google，但是没有任何帮助，或者这是可以理解的。 我没有像Jquery或任何插件那样使用任何东西。 只是html，css和JavaScript。

谢谢你的阅读。 也许对于这么简单的问题来说有点太多了，但我宁愿彻底而不是看过去。

如果您回复，请提前感谢您

Answer 1

我建议阅读有关如何在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();
});

Answer 2

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

 <body onload="init()" >

function init() {
   controller = new Controller();
   document.getElementById("button").addEventListener("click", controller.spawnBlock());
}

这样做，您将保证在运行任何脚本之前加载所有文档。

希望有所帮助。

Answer 3

您的控制器仅对config功能是本地的：

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

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

一个简单的解决方法是在全局对象上声明您的变量：

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

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

document.addEventListener("DOMContentLoaded", config);

es6未捕获的ReferenceError：未定义类

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-12-14 21:43:46

解决方案2
0 2016-12-14 21:41:11

解决方案3
0 2016-12-14 21:42:26

es6未捕获的ReferenceError：未定义类

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-12-14 21:43:46

解决方案2 0 2016-12-14 21:41:11

解决方案3 0 2016-12-14 21:42:26

解决方案1
1 已采纳 2016-12-14 21:43:46

解决方案2
0 2016-12-14 21:41:11

解决方案3
0 2016-12-14 21:42:26