サブタイプから呼び出されるスーパータイプのjsイベントオブジェクトにアクセスするには？

Question

ウェブページにイベントのHTMLコンテキストの異なるパーサを書きます。

がイベントを登録すると、パーサ機能にリンク：

基本的な構造は次のようになります。

elem.addEventListener(
    'click', 
    (e) => { 
     let parser = new UiResultsItemInfoParser(e); 
     eventInfo = parser.evntInfo; 
     submitEvnt(eventInfo); 
    } 
); 

UiResultsItemInforParserEvntParserとe呼ばれるスーパータイプのサブタイプは、明らかに、イベント・オブジェクトです。

EvntParserは次のようになります。

function EvntParser (e) { 
    this._evntInfo = {}; 
    this._evntInfo.time = e.timeStamp.toString(); 
    this._evntInfo.type = 'event'; 
} 

EvntParser.prototype = { 
    set evntInfo(e) { 
     this._evntInfo.time = e.timeStamp.toString(); 
     this._evntInfo.type = 'event'; 
    }, 
    get evntInfo() { 
     return JSON.stringify(this._evntInfo); 
    } 
}; 

UiResultsItemInforParserがEvntParser由来し、このようになりますされています。残念ながら

function UiResultsItemInfoParser(e) { 
    EvntParser.call(this, e); 
} 

UiResultsItemInfoParser.prototype = new EvntParser(); 
UiResultsItemInfoParser.prototype.constructor = UiResultsItemInfoParser; 

イベントがトリガされたとき、私はEvntParserにラインthis._evntInfo.time = e.timeStamp.toString();ためTypeError: e is undefinedを取得し、新しいUiResultsItemInfoParserオブジェクトがaddEventListenerに作成されます。

どうして私はEvntParserがオブジェクト作成中にイベントオブジェクトにアクセスできるように修正できますか？

Answer 1

この

UiResultsItemInfoParser.prototype = new EvntParser(); 

は、OPT-繰り返しアンチパターン、およびあなたの問題の根本です。 EvntParserは引数を受け取り、それが与えられたと仮定します（this._evntInfo.time = e.timeStamp.toString()）ので、上記を実行すると失敗します。代わりに

：

UiResultsItemInfoParser.prototype = Object.create(EvntParser.prototype); 

そのプロトタイプとしてEvntParser.prototypeを持つオブジェクトを作成しますが、なしがEvntParserを呼び出します。 （正確に正しい次の行は、結果のオブジェクトにconstructorを修正します）。

その後、サブクラスのコンストラクタでEvntParser.call(this, e);を実行して正しいことをしています。だから、それは本当にただ一つの行です。

---

矢印機能を使用しているので、ES2015環境で作業している必要があります。それはあなたがあなたのためにすべてのこの手間のかかるフック物事を行い、新たなclass構文、使用できることを意味します。あなたもUiResultsItemInfoParserでコンストラクタを定義する必要はありませんか

class EvntParser { 
    constructor(e) { 
     this._evntInfo = {}; 
     this._evntInfo.time = e.timeStamp.toString(); 
     this._evntInfo.type = 'event'; 
    } 
    set evntInfo(e) { 
     this._evntInfo.time = e.timeStamp.toString(); 
     this._evntInfo.type = 'event'; 
    } 
    get evntInfo() { 
     return JSON.stringify(this._evntInfo); 
    } 
} 

class UiResultsItemInfoParser extends EvntParser { 
} 

注意を。そうしないと、JavaScriptエンジンは、受け取ったすべての引数を持つsuperを呼び出すJavaScriptエンジンを定義します。

---

サイドノート：この：あなたが（でもES2015前に）好きなら

this._evntInfo = {}; 
this._evntInfo.time = e.timeStamp.toString(); 
this._evntInfo.type = 'event'; 

も

this._evntInfo = { 
    time: e.timeStamp.toString(), 
    type: 'event' 
}; 

を書き込むことができます。まったく同じオブジェクトが作成されます。