जावास्क्रिप्ट में ईवेंट हैंडलर के रूप में क्लास विधियां?

क्या जावास्क्रिप्ट में इवेंट हैंडलर के रूप में कक्षा के सदस्यों के लिए सबसे अच्छा अभ्यास या सामान्य तरीका है?जावास्क्रिप्ट में ईवेंट हैंडलर के रूप में क्लास विधियां?

निम्नलिखित सरल उदाहरण पर विचार करें:

<head> 
    <script language="javascript" type="text/javascript"> 

     ClickCounter = function(buttonId) { 
      this._clickCount = 0; 
      document.getElementById(buttonId).onclick = this.buttonClicked; 
     } 

     ClickCounter.prototype = { 
      buttonClicked: function() { 
       this._clickCount++; 
       alert('the button was clicked ' + this._clickCount + ' times'); 
      } 
     } 

    </script> 
</head> 
<body> 
    <input type="button" id="btn1" value="Click me" /> 
    <script language="javascript" type="text/javascript"> 
     var btn1counter = new ClickCounter('btn1'); 
    </script> 
</body>

ईवेंट हैंडलर buttonClicked बुलाया जाता है, लेकिन _clickCount सदस्य दुर्गम है, या किसी अन्य वस्तु को इस अंक।

इस तरह की समस्याओं के बारे में कोई अच्छी टिप्स/लेख/संसाधन?

स्रोत

2008-10-23 JacobE

ClickCounter = function(buttonId) { 
    this._clickCount = 0; 
    var that = this; 
    document.getElementById(buttonId).onclick = function(){ that.buttonClicked() }; 
} 

ClickCounter.prototype = { 
    buttonClicked: function() { 
     this._clickCount++; 
     alert('the button was clicked ' + this._clickCount + ' times'); 
    } 
}

स्रोत

2008-10-23 09:33:42 pawel

आपके समाधान के लिए धन्यवाद। मैं भी बड़ी तस्वीर - पैटर्न, प्रथाओं आदि को समझने की कोशिश कर रहा हूं। किसी भी अच्छे लेख के बारे में आप जानते हैं? – JacobE

यह बात बहुत अच्छी है: http://ejohn.org/apps/learn/ – pawel

यह एक अच्छा उदाहरण है, लेकिन यह उत्तर कुछ स्पष्टीकरण के साथ बेहतर हो सकता है कि यह एक अच्छा समाधान क्यों है, यहां के नौसिखियों के लिए। –

onclick संपत्ति को सीधे जुड़ी एक समारोह तत्व पर निष्पादन संदर्भ के this संपत्ति इशारा होगा।

आप (एक ला .NET में एक प्रतिनिधि) तो आप एक बंद की आवश्यकता होगी एक वस्तु का एक विशिष्ट उदाहरण के खिलाफ चलाने के लिए एक तत्व घटना की जरूरत है जब: -

function MyClass() {this.count = 0;} 
MyClass.prototype.onclickHandler = function(target) 
{ 
    // use target when you need values from the object that had the handler attached 
    this.count++; 
} 
MyClass.prototype.attachOnclick = function(elem) 
{ 
    var self = this; 
    elem.onclick = function() {self.onclickHandler(this); } 
    elem = null; //prevents memleak 
} 

var o = new MyClass(); 
o.attachOnclick(document.getElementById('divThing'))

स्रोत

2008-10-23 10:05:05 AnthonyWJones

यह वही है जो मैं ढूंढ रहा था! धन्यवाद! – Jeremy

मैं नहीं जानता क्यों Function.prototype.bind का अभी तक उल्लेख नहीं किया गया था। तो मैं बस यहाँ इस छोड़ देंगे;)

ClickCounter = function(buttonId) { 
    this._clickCount = 0; 
    document.getElementById(buttonId).onclick = this.buttonClicked.bind(this); 
} 

ClickCounter.prototype = { 
    buttonClicked: function() { 
     this._clickCount++; 
     alert('the button was clicked ' + this._clickCount + ' times'); 
    } 
}

स्रोत

2016-03-19 13:00:47 kucherenkovova

आप वसा-तीर वाक्य रचना है, जो समारोह

function doIt() { 
    this.f =() => { 
    console.log("f called ok"); 
    this.g(); 
    } 
    this.g =() => { 
    console.log("g called ok"); 
    } 
}

उसके बाद का शाब्दिक गुंजाइश को बांधता उपयोग कर सकते हैं आप की कोशिश कर सकते

var n = new doIt(); 
setTimeout(n.f,1000);

आप इसे babel पर आजमा सकते हैं या यदि आपका ब्राउज़र jsFiddle पर ES6 का समर्थन करता है।

दुर्भाग्यवश ईएस 6 क्लास-सिंटैक्स इस कार्य को लंबवत रूप से बांधने की अनुमति नहीं देता है। मैं व्यक्तिगत रूप से सोचता हूं कि यह भी ऐसा कर सकता है। संपादित करें: experimental ES7 feature to allow it लगता है।

स्रोत

2016-03-19 16:22:21

जावास्क्रिप्ट में ईवेंट हैंडलर के रूप में क्लास विधियां?

उत्तर

संबंधित मुद्दे