Aufrufen von Funktionen aus einer anderen Klasse in es6

Question

Mein Problem ist sehr einfach. Grundsätzlich habe ich eine Controller- und eine View-Klasse. Wenn ich auf eine Schaltfläche klicke, sagt der Controller der Ansicht, dass etwas angezeigt werden soll. Problem ist, der Controller kann nicht. Hier ist der Code.

class Controller { 
 

 
    constructor(view) { 
 
     view = new View(); 
 
     
 
     let button = document.getElementById('button'); 
 
     button.addEventListener('click',() => { 
 
      controller.doThing(); 
 
     }); 
 
    } 
 
    
 
    doThing() { 
 
     view.drawThing(5, 5); 
 
    } 
 

 
} 
 

 
class View { 
 
    
 
    constructor(controller) { 
 
     let canvas = document.getElementById('canvas'); 
 
     let pen = canvas.getContext('2d'); 
 
     
 
     this.controller = Controller; 
 
     this.drawThing = drawThing(); 
 
    } 
 

 
    drawThing(x, y) { 
 
     pen.beginPath(); 
 
     pen.moveTo(0, 0); 
 
     pen.lineTo(x, y); 
 
     pen.stroke(); 
 
    } 
 

 
}

Das Ergebnis davon ist ein

Uncaught TypeError: Cannot read property 'drawThing' of undefined 
at Controller.doThing (Controller.js:17) 
at HTMLButtonElement.Controller.button.addEventListener (Controller.js:12) 

Answer 1

Die view Variable nur an den Konstruktor scoped wird. Sie sollten this.view statt:

class Controller { 

    constructor(view) { 
     this.view = new View(); 

     let button = document.getElementById('button'); 
     button.addEventListener('click',() => { 
      controller.doThing(); 
     }); 
    } 

    doThing() { 
     this.view.drawThing(5, 5); 
    } 

}