addEventListener ونطاق ذلك

Question

لدي كائن فلاش تابع لجهة خارجية يمكنني معالجته من خلال واجهة برمجة تطبيقات جافا سكريبت التي قدموها.أحاول الاستماع إلى حدث ما على هذا الكائن ثم إطلاق الحدث داخل الكائن الخاص بي لإضفاء مزيد من الفقاعة على الحدث.أنا أستخدم 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

وماذا عن خلق متغير خارجي قبل الرجوع إلى 'هذا' الكائن. على سبيل المثال:

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

Answer 3

في حين أن الإجابات الأخرى تحقق ما تحتاجه، إلا أنها لا تعمل بالطريقة الأكثر كفاءة (قابلة للتطوير)، لأنها لا تقوم في النهاية بفصل كائن العرض (this.chart) من منطق هذا العرض (fireEvent()).في تطبيقات MVC، توجد "قرارات" العرض هذه في ملف مراقب.وحدة التحكم "الضوابط" الآراء ويجب أن يحتوي على كافة واجهات برمجة التطبيقات التي يمكن للعرض الوصول إليها.

في المثال الخاص بك، 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