जावास्क्रिप्ट को ईवेंट हैंडलर

Question

से अभिभावक ऑब्जेक्ट/क्लास का संदर्भ मिलता है मेरे पास एक वर्ग (या फ़ंक्शन-युक्त ऑब्जेक्ट है; मैंने सुना है कि जावास्क्रिप्ट क्लास जैसी कोई चीज़ नहीं है) जिसे फू कहा जाता है, जिसमें एक ईवेंट हैंडलर संलग्न होता है एक क्लिक घटना के लिए। जब ईवेंट हैंडलर कहा जाता है, तो मैं अपनी कक्षा फू की एक संपत्ति को संशोधित करना चाहता हूं। आम तौर पर, मैं this कीवर्ड का उपयोग करता हूं, लेकिन ईवेंट हैंडलर में, this संदर्भ HTML तत्व के संदर्भ में सेट है। यहाँ मेरी कोड है:

function Foo() { 

    this.num=0; 
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element. 

    this.eventHandler=function() { 
     this.num++;// This doesn't work. 
     // Normally, "this" would refer to my instance of Foo, 
     // but as an event handler, "this" refers to the html element. 
    } 
} 

तो मेरे सवाल है: कैसे मैं इतना है कि मैं इसकी प्रॉपर्टी (जैसे num) संशोधित कर सकते हैं मेरी ईवेंट हैंडलर में फू के अपने उदाहरण के लिए एक संदर्भ मिलता है?

Answer 1

function Foo() { 
    var _self = this; 
    this.num=0; 

    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element. 

    this.eventHandler=function() { 
     _self.num++; 
    } 
} 

उपयोग एक संदर्भ _self = this बाहरी गुंजाइश

Answer 2

आप निर्माता है कि आप अपने ईवेंट हैंडलर में उपयोग कर सकते हैं में this के लिए एक संदर्भ स्टोर कर सकते हैं में परिभाषित किया।

function Foo() { 

    this.num=0; 
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element. 

    var that = this; 
    this.eventHandler=function() { 
     that.num++;// This doesn't work. 
    } 
} 

Answer 3

आपको फ़ंक्शन के संदर्भ को बाध्य करने की आवश्यकता है; एक आधुनिक ब्राउज़र में

$('element').click($.proxy(this.eventHandler, this)); 

आप भी Function.prototype.bind उपयोग कर सकते हैं:

$('element').click(this.eventHandler.bind(this)) 

Answer 4

function Foo() { 
    this.num=0; 
    $(document).on('click', 'element', this, this.eventHandler); 
    this.eventHandler=function(e) { 
     var _this = e.data; 
     _this.num++; 
    } 
} 

1) घटना श्रोताओं को संलग्न करने पर() विधि JQuery का उपयोग करें अन्यथा this वैश्विक वस्तु हो जाएगा। 2) अभिभावक वर्ग तक पहुंचने के लिए संदर्भ संदर्भ का उपयोग करें।