コールバック関数で「this」オブジェクトに正しくアクセスする方法

Question

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

<code>function MyConstructor(data, Transport) {
    this.data = データ;
    Transport.on('データ', function () {
        アラート(this.data);
    });
}

//転送オブジェクトをシミュレートする
var トランスポート = {
    on: 関数(イベント、コールバック) {
        setTimeout(コールバック, 1000);
    }
};

// メソッドの呼び出し
var obj = new MyConstructor('foo', Transport);</code>

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

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

function MyConstructor(data, Transport) {
    this.data = データ;
    Transport.on('データ', this.alert);
}

MyConstructor.prototype.alert = function() {
    アラート(この名前);
};

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

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

Answer 1

子コンテキストで親コンテキストにアクセスする方法は次のとおりです:

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

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

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

this

値にバインドします。 注: jQuery のバインディング コンテキストには、jQuery.proxy

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

this

として使用される値も受け入れます。これは手動バインドと同じですが、関数/メソッドがバインドを実行します。たとえば、Array#map

[Documentation] がそのようなメソッドです。その署名は次のとおりです: リーリー 最初のパラメータはコールバック関数で、2 番目のパラメータは ^this が参照する値です。以下は不自然な例です: リーリー

注: this の値を渡すことができるかどうかは、通常、関数/メソッドのドキュメントに記載されています。たとえば、jQuery の $.ajax メソッド ^{[Documentation]} には、context というオプションが記述されています。

---

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

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

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

リーリー

関数

this.method がクリック イベント ハンドラーとして割り当てられていますが、document.body がクリックされた場合、記録される値は unknown になります。イベント ハンドラー内では、this は Foo のインスタンスではなく、document.body を参照します。 前に述べたように、
this は、関数 がどのように呼び出されるか ( を指すものであり、 がどのように定義されるか () を指すものではありません)。 コードが次のようになっていると、よりわかりやすいかもしれません:
リーリー

解決策 上記と同じ: .bind を使用して、利用可能な場合は this を特定の値 に明示的にバインドします。 リーリー

または、コールバック/イベントとして匿名関数を使用することによって