Hash der statischen Funktionen zurückgeben ist leeres Objekt

Question

Ich versuche, Zeichenfunktionen basierend auf einem Schlüssel dynamisch aufzurufen.

Wenn ich renderFunctions abmelden, wird es als leeres Objekt {} angezeigt.

Ich erwarte, dass die Funktionen mit den Schlüsseln "ship" und "ball" drin sind.

class Render { 
 
     static renderFunctions() { 
 
     return { 
 
      'ship': this.drawShip, 
 
      'ball': this.drawBall 
 
     }; 
 
     } 
 

 
     static render(key, ls, context, portal) { 
 
     let renderFns = this.renderFunctions(); 
 
     console.log(renderFns); 
 
     } 
 

 
     static drawShip(ctx, p, t) { 
 
     p.drawRect(ctx, t.x - 5, t.y - 100, 10, 100, t.teamColor); 
 
     } 
 

 
     static drawBall(ctx, p, t) { 
 
     ctx.arc(t.x, t.y, 7, 0, 2 * Math.PI, false); 
 
     ctx.fillStyle = t.teamColor; 
 
     ctx.fill(); 
 
     } 
 
    }

Warum werden meine Funktionen nicht?

Answer 1

Sie sollten sich nicht auf statische Funktionen als Eigenschaften von this beziehen, sondern als Eigenschaften Ihrer Klasse (d. H. Render).

class Render { 
    static renderFunctions() { 
     return {'ship' : Render.drawShip, 
     'ball' : Render.drawBall}; 
    } 

    static render(key, ls, context, portal) { 
     let renderFns = Render.renderFunctions(); 
     console.log(renderFns); 
    } 

    static drawShip(ctx, p, t) { 
     p.drawRect(ctx, t.x - 5, t.y - 100, 10, 100, t.teamColor); 
    } 

    static drawBall(ctx, p, t) { 
     ctx.arc(t.x, t.y, 7, 0, 2 * Math.PI, false); 
     ctx.fillStyle = t.teamColor; 
     ctx.fill(); 
    } 
}