CanvasRenderingContext2Dを拡張する方法（可能であれば、ES6スタイルのスクリプトで）

Question

CanvasRenderingContext2Dを拡張する新しいクラスを作成したいとします。だから私はCanvasRenderingContext2D.attributeの代わりに、その新しいクラスのprototype属性にユーザー定義の属性を割り当てることができます。以下は、私が書くことを意図したコードです：

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

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

CanvasRenderingContext2Dがnewオペレータを防ぐため、これは動作しません - 次のコードは、エラーがスローされますと同じように：

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

それから私は書き直してみました別の方法でコンストラクタ：

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 

コメントが示すように、から作成された新規インスタンス0はこのようにして実際にWL_CRC2D.prototypeの属性にアクセスすることはできません。

CanvasRenderingContext2Dというシステム定義のクラスを汚染しないで回避する方法はありますか？お知らせ下さい。ありがとう！

Answer 1

私は醜い方法でこれを考え出したことがあります。上記のコードでの不備がある場合

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); 

はまだお知らせください。ありがとう！