3

クラス インスタンス内の HTMLElement メンバーの onclick イベント ハンドラーを設定しようとしていますが、両方の試行で問題があります。

1: 使用できないキーワード

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick = function(e) {
      this._onclick(); // keyword 'this' is not the instance in this scope
    }
  }
  _onclick() {
    alert('I've been clicked!');
  }
}

2: エラー:「'void' を (ev:FocusEvent) => any に変換できません。」

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick =  this._onclick(); // error
  }
  _onclick() {
    alert('I've been clicked!');
  }
}

これは、私の側の言語の理解が不足していることを示していると思います。誰かが解決策を明確にし、おそらく投稿していただければ幸いです。

4

2 に答える 2

4

キーワードは、this関数が呼び出されるコンテキストにバインドされます。などの DOM 要素のイベントの結果として関数が呼び出されると、関数はonclickその要素を指します。

最初の例の回避策は、コンストラクターのコンテキストを新しい変数に保持することです。これにより、次のように呼び出されますthat。

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    var that = this;   //that and this both point to the new Object
    this.div.onclick = function(e) {
                       //this now points elsewhere
      that._onclick(); //that still point to the new object
    }
  }
  _onclick() {
    alert('I\'ve been clicked!');
  }
}

2 番目の例では、括弧を追加して関数を評価するため、その結果をプロパティonclickに割り当てます。div.onclick

正しいコードは次のとおりです。

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick =  this._onclick;
  }
  _onclick() {
    alert('I\'ve been clicked!');
  }
}
于 2013-07-09T22:03:01.633 に答える