ホームページ > 記事 > ウェブフロントエンド > JavaScript イベント ハンドラーでインスタンス スコープを保持する方法: 変数エイリアスを使用して「これ」をキャプチャする?
イベント ハンドラーの変数スコープ: 「この」難問
JavaScript では、イベント ハンドラーのコールバックとして使用されるインスタンス メソッドがスコープの問題を引き起こす可能性があります。イベント ハンドラーがトリガーされると、「this」のスコープは、目的のインスタンスからコールバックを呼び出した要素に移動します。これには、インスタンスのスコープを「キャプチャ」して維持するために変数を使用する必要があります。
「self」変数を宣言して「this」のエイリアスを作成し、それをイベント ハンドラーに渡す手法です。次に示すように、コード スニペットは一般的な解決策です。ただし、その型破りな外観により、その適合性について懸念が生じる可能性があります。
「self」エイリアシングの代替案:
中心的な問題は jQuery 固有ではなく、JavaScript のクロージャーに関係します。行動。クロージャを使用すると、埋め込み関数が親スコープから変数にアクセスできるようになりますが、この疑似変数の動作は異なります。コードが示すように:
// Attempt to use "this" in embedded functions function xyz() { console.log(this); // Incorrect }
この動作には修正されたアプローチが必要です:
// Assign "this" to a variable (i.e., abc) and use the variable instead var abc = this; function xyz() { console.log(abc); // Correct }
「this」を abc でエイリアスすることにより、意図したインスタンスのスコープへのクロージャのアクセスが保持されます。この手法は、「arguments」などの他の疑似変数にも適用できます。
したがって、「self」エイリアシング方法は機能しますが、変数に「this」を明示的に割り当てて参照する代替方法は、より多くの効果を提供します。イベント ハンドラー コールバック関数のスコープ問題に対する従来の堅牢なソリューション。
以上がJavaScript イベント ハンドラーでインスタンス スコープを保持する方法: 変数エイリアスを使用して「これ」をキャプチャする?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。