コールバックで正しい「this」にアクセスする方法

Question

イベント ハンドラーを登録するコンストラクターがあります:

リーリー

ただし、コールバック内で作成されたオブジェクトの data プロパティにアクセスできません。 this は作成されたオブジェクトを参照しているのではなく、別のオブジェクトを参照しているようです。

匿名関数の代わりにオブジェクト メソッドを使用してみました:

リーリー

しかし、同じ問題もあります。

正しいオブジェクトにアクセスするにはどうすればよいですか?

Answer 1

子コンテキストで親コンテキストにアクセスするいくつかの方法を次に示します -

1. を使用して () 関数をバインドできます。
2. context/this への参照を別の変数に保存します (以下の例を参照)。
3. ES6 arrow 機能を使用します。
4. コード、機能設計、アーキテクチャを変更する - そのためには、JavaScript の デザイン パターン をマスターする必要があります。

1.bind()関数

を使用します。 リーリー

Underscore.js を使用している場合 - http://underscorejs.org/#bind

リーリー

2. context/this への参照を別の変数に保存します

リーリー

3.アロー関数

リーリー

Answer 2

概要これについて知っておくべきこと

this (別名「コンテキスト」) は、各関数内の特別なキーワードであり、その値は、関数が呼び出される方法/いつ/何をどこで呼び出すかではなく、関数が呼び出される方法にのみ依存します。それは定義されています。他の変数と同様に字句スコープの影響を受けません (アロー関数を除く、以下を参照)。ここではいくつかの例を示します：＃＃＃ リーリー この

について詳しくは、

MDN ドキュメント をご覧ください。 正しい引用方法

this

---

アロー関数を使用する

ECMAScript 6 では、ラムダ関数と考えることができる arrow 関数 が導入されています。独自の

this

バインディングはありません。代わりに、this は通常の変数と同じようにスコープ内で検索されます。これは、.bind を呼び出す必要がないことを意味します。これは特別な動作だけではありません。詳細については、MDN ドキュメントを参照してください。 リーリー これは使用しないでください

実際には

this に具体的にアクセスする必要はありませんが、 それが参照するオブジェクト

にアクセスします。そのため、簡単な解決策は、オブジェクトを参照する新しい変数を単純に作成することです。変数には任意の名前を付けることができますが、一般的な名前は

self と that です。 リーリー self は通常の変数であるため、字句スコープ規則に従い、コールバック内でアクセスできます。これには、コールバック自体の this

値にアクセスできるという利点もあります。

コールバックの明示的な設定 this - パート 1

this の値は自動的に設定されるため、値を制御できないように見えるかもしれませんが、実際はそうではありません。

すべての関数にはメソッド

.bind

[docs] があり、this ^{の新しい関数を返します。値にバインドします。この関数は、}this がユーザーによって設定されることを除いて、呼び出した関数 .bind とまったく同じ動作をします。関数がいつどのように呼び出されるかに関係なく、this は常に渡された値を参照します。 リーリー この例では、コールバックの this を MyConstructor

の

this の値にバインドします。 注: jQuery のコンテキストをバインドするときは、

jQuery .proxy

[docs] replace を使用します。 。この理由は、イベント コールバックのバインドを解除するときに関数への参照を保存する必要がないためです。 jQuery はこれを内部で処理します。 ^{コールバックの設定} this - パート 2

コールバックを受け入れる一部の関数/メソッドは、コールバックの

this が参照する必要がある値も受け入れます。これは基本的に自分でバインドするのと同じですが、関数/メソッドが自動的にバインドします。

Array#map

[docs]これがメソッドです。その署名は次のとおりです: < em> リーリー ^{最初のパラメータはコールバックで、2 番目のパラメータは} this が参照する値です。以下は不自然な例です: リーリー

注: this に値を渡すことが可能かどうかは、通常、その関数/メソッドのドキュメントに記載されています。たとえば、jQuery の $.ajax メソッド ^[docs] には、context:

というオプションが記述されています。

---

FAQ: オブジェクト メソッドをコールバック/イベント ハンドラーとして使用する

この問題のもう 1 つの一般的な症状は、オブジェクト メソッドがコールバック/イベント ハンドラーとして使用される場合です。関数は JavaScript の第一級市民であり、「メソッド」という用語は、オブジェクトのプロパティの値である関数を表す口語的な用語にすぎません。ただし、この関数には、その「含まれる」オブジェクトへの特定のリンクがありません。

次の例を考えてみましょう:

リーリー

関数 this.method がクリック イベント ハンドラーとして指定されていますが、document.body がクリックされた場合、ログに記録される値は unknown になります。イベント ハンドラー this は、Foo のインスタンスではなく、document.body を参照します。
冒頭ですでに述べたように、this が何を指すかは、関数 の定義方法ではなく、関数 の呼び出し方法によって決まります。 コードが次のようになっている場合、関数にオブジェクトへの暗黙的な参照がないことがより明らかになるかもしれません。 リーリー
解決策

上記と同じ:

.bind を使用して、利用可能な場合は this を特定の値 に明示的にバインドします。 リーリー または、無名関数をコールバック/イベント ハンドラーとして使用し、オブジェクト (this

) を別の変数に割り当てることで、オブジェクトの「メソッド」として関数を明示的に呼び出します。 リーリー

または、アロー関数を使用します: リーリー