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 サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
VercelSPAルーティングとリソースの読み込み：ディープURLアクセスの問題を解決する
Aug 13, 2025 am 10:18 AM
この記事の目的は、Vercelにシングルページアプリケーション（SPA）を展開する際に、ディープURLの更新または直接アクセスの原因となる問題を解決することを目的としています。コアは、Vercelのルーティング書き換えメカニズムと相対パスを解析するブラウザの違いを理解することです。 Vercel.jsonを設定してすべてのパスをindex.htmlにリダイレクトし、HTMLの静的リソースの参照方法を修正し、相対パスを絶対パスに変更し、アプリケーションがすべてのリソースを任意のURLに正しくロードできるようにします。
Vercel Single Page Application（SPA）展開ガイド：ディープURLアセットの負荷の問題の解決
Aug 13, 2025 pm 01:03 PM
このチュートリアルは、Vercelにシングルページアプリケーション（SPA）を展開するときにマルチレベルのURL（ /プロジェクト /ホームなど）にアクセスするときに、資産（CSS、JS、画像など）をロードする問題を解決することを目的としています。コアは、vercelのルーティング書き換えメカニズムとHTMLの相対/絶対パスの違いを理解することにあります。 vercel.jsonを正しく構成することにより、すべての非ファイル要求がindex.htmlにリダイレクトされ、HTMLの資産参照を絶対パスとして修正することにより、任意の深度URLでSPAの安定した動作を達成します。
JSは、配列の開始に要素を追加します
Aug 14, 2025 am 11:51 AM
JavaScriptでは、配列の先頭に要素を追加する最も一般的な方法は、unshift（）メソッドを使用することです。 1. unshift（）を使用すると、元の配列が直接変更されると、1つ以上の要素を追加して、追加された配列の新しい長さを返すことができます。 2.元の配列を変更したくない場合は、拡張機能操作者（[newElement、... arr]など）を使用して新しい配列を作成することをお勧めします。 3. concat（）メソッドを使用して、新しい要素配列と元の番号を組み合わせて、元の配列を変更せずに新しい配列を返すこともできます。要約すると、元の配列を変更するときにunshift（）を使用し、元の配列を変更しておくときは拡張オペレーターを推奨します。
QWIK：インスタントロードWebアプリの再開可能なフレームワーク
Aug 15, 2025 am 08:25 AM
qwikachievesintantloadingbydefaultroughresumability、nothydration：1）theserverrendershtmlwithserializedstateandpre-mappeventlisteners;
JavaScriptを使用して画像を怠zyにする方法
Aug 14, 2025 pm 06:43 PM
usetheloading = "lazy" aptiontfornativelazyloadinginmodernbrowserswithoutjavascript.2.formorecontrololorolderbrowsersupport、interthectionectingttingdata-srcfortheactualimageururururursisaplaceholdininsrc.3.ob.3.ob.
JavaScriptのDOMを使用してHTML要素にアクセスして変更する方法
Aug 16, 2025 am 11:25 AM
toaccessandModifyHtmLelementSusingJavaScript、firstSelectTheElementusingMethodslikedocument.getElementByid、document.QuerySelector、ordocument.QuerySelectorAll、TheralteritsContent、属性、Orstyles;
JavaScript XSS防御機能の共通の脆弱性と改善戦略の詳細な分析
Aug 14, 2025 pm 10:06 PM
この記事では、カスタムJavaScript XSS防御機能の詳細なセキュリティの脆弱性、特に不完全な文字エスケープとキーワードベースのフィルタリングへの簡単なバイパスについて説明します。例の関数を分析することにより、引用符やバックコートなどの未処理のキーワード文字のリスクと、コード難読化技術が単純なキーワード検出をどのように回避するかを明らかにします。この記事は、コンテキストに敏感な脱出の重要性を強調し、より堅牢なセキュリティ保護を構築するために、成熟したライブラリと多層防衛戦略の採用を推奨しています。
jQueryポップアップウィンドウでの動的外部リンクジャンプのイベント処理を最適化する
Sep 01, 2025 am 11:48 AM
この記事の目的は、jQueryポップアップウィンドウで外部リンクリダイレクトボタンをリダイレクトする問題を解決することを解決することを目的としています。ユーザーが複数の外部リンクを連続してクリックすると、ポップアップのジャンプボタンは常に最初のクリックリンクを指す場合があります。コアソリューションは、オフ（「クリック」）メソッドを使用して、新しいイベントの各バインディングの前に古いイベントハンドラーを元に戻し、ジャンプ動作が常に最新のターゲットURLを指すようにし、正確で制御可能なリンクリダイレクトを実現することです。
