addEventListenerとthisのスコープ

Question

私はサードパーティ製のフラッシュオブジェクトを用意しています。これらのオブジェクトは、提供しているJavaScript APIを通じて操作できます。私はこのオブジェクトのイベントを聞いて試してみると、オブジェクトの中でイベントを発生させ、イベントをさらに泡立たせます。私はEXT Jsを使用していますが、ここでは重要ではないと思います。

サンプルコード

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

私の問題は、匿名関数内の「これは」私は上のイベントを発生するイベントではなく、私のオブジェクトを解雇したオブジェクトを参照すること。あります

さらに別の範囲の問題です。助けを前にありがとう。

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

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

あなたの例では、thisがコントローラであり、これはうまくいきます（適切な場所にリスナーを追加していることを意味します）。あなたが本当にやらなければならないことは、「取り扱い」やるべき事の範囲にハンドラをバインドしている - あなたのケースでは：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