So erweitern Sie CanvasRenderingContext2D (in ES6-Skripts, wenn möglich)

Question

Ich möchte eine neue Klasse erstellen, die CanvasRenderingContext2D erweitert. Damit kann ich die benutzerdefinierten Attribute dem Attribut prototype dieser neuen Klasse statt CanvasRenderingContext2D.attribute zuweisen. Im Folgenden ist der Code, den ich schreiben wollte:

class WL_CRC2D extends CanvasRenderingContext2D{ 
    constructor(){ 
     super(); 
    } 
    setStyle(args){//... 
    } 
    //... 
} 

var ctx = new WL_CRC2D() // Uncaught TypeError: Illegal constructor 

Das funktioniert nicht, weil CanvasRenderingContext2D die new Betreiber verhindert - ebenso wie der folgende Code auch Fehler auslöst:

var ctx = new CanvasRenderingContext2D(); // Uncaught TypeError: Illegal constructor 

Dann habe ich versucht, neu zu schreiben der Konstruktor in einer anderen Art und Weise:

class WL_CRC2D{ 
    constructor(){ 
     let ctxTemp = Object.create(CanvasRenderingContext2D.prototype); 
     for (let i of Reflect.ownKeys(ctxTemp.__proto__)){ 
      Object.defineProperty(this.__proto__, i, Object.getOwnPropertyDescriptor(ctxTemp.__proto__, i)); 
     } 
    } 
    setStyle(args){//... 
    } 
    //... 
} 

var ctx = new WL_CRC2D(); // fine 
console.log(ctx.arc); // function arc() { [native code] } 
ctx.arc(0, 0, 10, 0, 1, true); // Uncaught TypeError: Illegal invocation 

Da die Kommentare zeigen, die neue Instanz erstellt von WL_CRC2D kann auf diese Weise nicht auf die Attribute in WL_CRC2D.prototype zugreifen.

Gibt es also einen Weg, ohne die systemdefinierte Klasse CanvasRenderingContext2D zu verfärben? Bitte beraten. Vielen Dank!

Answer 1

ich dies dargestellt haben, kann in einem hässlichen Ausweg:

class WL_CanvasRenderingContext2D{ 
    constructor(ctx){ 
     this.ctx = ctx; 
    } 
} 
(() => { 
    var context = document.createElement('canvas').getContext('2d'); 
    for (let i of Reflect.ownKeys(Object.getPrototypeOf(ctx))){ 
     if (['symbol', 'constructor'].indexOf(typeof i) < 0){ 
      var propertyDesc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(context), i); 
      if (typeof context[i] != 'function'){ 
       [propertyDesc.get, propertyDesc.set] = [function(){return this.ctx[i]}, function(val){this.ctx[i] = val;}]; 
      } 
      else{ 
       propertyDesc.value = function(...args) {this.ctx[i].apply(this.ctx, args)}; 
      } 
      Object.defineProperty(WL_CanvasRenderingContext2D.prototype, i, propertyDesc); 
     } 
    } 
})(); 

var a = new WL_CanvasRenderingContext2D(ctx); 

Bitte mich noch informieren, ob es irgendwelche Fehler mit dem Code oben sind. Vielen Dank!