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