活字体：無関係なクラスのインスタンス機能を上書き

Question

私はこの

export class Item { 

    element:JQuery<HTMLElement> 

    constructor(...) { 
     this.element = $("<div >...</div>"); 
     ... 
     this._tooltipUpdate(); 
     this.element.tooltip({ 
      items: "div[data-tooltip]", 
      content: this.element.attr("data-tooltip"), 
      open: this._tooltipUpdate, 
      ... 
     }); 

    } 

    ... 

    public _tooltipUpdate =():void => { 
     this.element.attr(
      "data-tooltip", 
      `...` 
     ); 
    }; 

} 

のように構築Itemクラスは、基本的には、Itemクラスは、そのDOM要素を保持しているelement属性を持っています。

私は今InventoryElement

export class InventoryElement extends MenuElement { 

    amount:number; 

    constructor(item:Item) { 
     super(...) 

     this.amount = 0; 

     ... 

     this.item._tooltipUpdate =() => { 
      this.element.attr(
       "data-tooltip", 
       `${this.amount}` 
      ); 
     } 
    } 
} 

---

、別のクラスを持っているInventoryElementのItemインスタンスは基本的に、異なる_tooltipUpdate機能を持つ必要があります。 現在、正しく上書きされていません。 私は、Item上_tooltipUpdateが前に、このような実装

_tooltipUpdate() { 
    ... 
} 

を持っていたが、私はそれがプロトタイプの機能の代わりに、上記の矢印演算子でインスタンス機能として実装することをお読みください。

arrow機能を正しく使用していますか？ Itemインスタンスの機能を変更するにはどうすればよいですか？ありがとう！

Answer 1

矢印機能を使用する場合は、InventoryElementという呼び出しインスタンスにthisをバインドします。

あなたはItemでthis.elementを呼び出したい場合、あなたは一般的に、私はあなたがこれを行うような方法は、最善の方法だとは思わないbind関数定義

を参照してください

this.item._tooltipUpdate = function() { 
    // this is now bound to Item 
}.bind(this.item); 

を行う必要があります。 あなたの_tooltipUpdateは、ハンドラのようなもので、アイテム内の変更に対応できるようです。いくつかのイベントロジックを実装してリスナをアタッチする方が良いでしょう。

また、わかりましたが、ちょうど変化しているamountがあります。ですから、setAmountというItemの中にメソッドを持たないのはなぜですか？それははるかにクリーンで実装が簡単です。