addEventListenerとthisのスコープ

Question

サードパーティのフラッシュオブジェクトがあり、提供されたJavaScript APIを介して操作できます。私はこのオブジェクトのイベントをリッスンし、オブジェクト内でイベントを発生させてイベントをさらにバブルアップしようとしています。私はEXT Jを使用していますが、ここでは重要ではないと思います。

サンプルコード

this.chart.addEventListener('create', function() {
    this.fireEvent('created');
}, false)

私の問題は、匿名関数内の「this」が、イベントを発生させたいオブジェクトではなく、イベントを発生させたオブジェクトを指していることです。

さらに別のスコープの問題。助けてくれてありがとう。

Answer 1

これは、この問題に対する典型的なアプローチです：-

(function(self) {
  self.chart.addEventListener('create', function() {self.fireEvent('created');}, false);
})(this);

Answer 2

「this」オブジェクトを参照する前に外部変数を作成するのはどうですか。 例：

var _this = this;
this.chart.addEventListener('create', function() { _this.fireEvent('created'); }, false)

Answer 3

他の回答は必要なものを達成しますが、ビューオブジェクト（ this.chart ）を最終的に切り離さないため、最も効率的な（スケーラブルな）方法で動作しません。ビューのロジック（ fireEvent（））。 MVCアプリケーションでは、これらのビュー「決定」は、 コントローラに常駐します。コントローラーの「コントロール」 ビュー。ビューがアクセスできるすべてのAPIを含める必要があります。

この例では、 this がコントローラーであり、それで問題ありません（つまり、適切な場所にリスナーを追加することを意味します）。本当に必要なことは、ハンドラを＆quot;処理＆quot;を行うべきもののスコープにバインドすることだけです-あなたの場合： this ：

// `this` is the controller of `chart`
this.chart.addEventListener('create', function() {
    this.fireEvent('created');
}.bind(this));

このページの他の答えは、ビューが独自のコントローラーになるようにしますが、「作成」イベントを処理している間のみ、「コントローラー」に一時的な参照を割り当てます。 var self = this を使用します。繰り返しますが、これはうまく機能しますが、イベント駆動型アプリケーションでは大規模にうまく機能せず、処理するイベントがたくさんある場合はあまり意味がありません。

.bind（）はECMAScript 5の実装です。古いブラウザでも動作する必要がある場合は、ここで説明します（ functions および .call（）を使用）： https://developer.mozilla.org/en-US/docs/JavaScript/Reference/ Global_Objects / Function / bind