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 サイトの他の関連記事を参照してください。