JavaScript イベント ハンドラで「this」が予期しない動作をするのはなぜですか?

イベント ハンドラー内のあいまいな「this」

JavaScript を使用する場合、addEventListener メソッドを使用してイベント ハンドラーを作成するのが一般的です。ただし、これらのハンドラー内でオブジェクトのプロパティにアクセスしようとすると、特有の動作が発生します。「this」はオブジェクトを参照するのではなく、イベントをトリガーした要素を参照します。

問題のシナリオ

この問題を示す次のコードを考えてみましょう。

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick, false);
};

ticketTable.prototype.handleCellClick = function() {
  // "this" refers to the clicked cell element, not the ticketTable object
  // ...
};

handleCellClick 関数では、this.tickets へのアクセスは失敗します。これは、「this」が ticketTable インスタンスではなく、クリックされたセルを参照しているためです。

解決策: Bind の使用

この問題を解決するには、bind メソッドを利用します。これにより、指定された関数の "this" の値を明示的に定義できるようになります。 .

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);
};

bind(this) を使用すると、後で handleCellClick 関数が呼び出されたときに、「this」が ticketTable オブジェクトを正しく参照し、this.tickets などのそのプロパティにアクセスできるようになります。 .

代替ソリューション

バインド以外の代替アプローチには、(onclick プロパティではなく) "this" を使用するように明示的に定義されたイベント ハンドラー関数を使用するか、特別な handleEvent を作成することが含まれます。すべてのイベントを処理する関数。

以上がJavaScript イベント ハンドラで「this」が予期しない動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。