128

ईएक्स 6 एरो फंक्शंस का इस्तेमाल करना लेक्सिकल thisबाइंडिंग के साथ बढ़िया है।

हालाँकि, मैं एक समय पहले एक विशेष jQuery क्लिक बंधन के साथ इसका उपयोग कर एक मुद्दे में भाग गया:

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

इसके बजाय एक तीर फ़ंक्शन का उपयोग करना:

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

और फिर $(this)ES5 में परिवर्तित हो जाता है (आत्म = यह) प्रकार बंद।

एक तरीका है ट्रेसेर को लेक्सिकल बाइंडिंग के लिए "$ (यह)" अनदेखा करना है?

— JRodl3r
स्रोत

यह तब एक आदर्श उदाहरण लगता है जब तीर फ़ंक्शन का उपयोग नहीं करना .on()पड़ता है क्योंकि वास्तव में thisआपके लिए उपयोगी मूल्य है। मेरे लिए यह thisईवेंट टारगेट के संदर्भ में इवेंट को पास करने और मैन्युअल रूप से टारगेट खोजने की तुलना में बहुत स्पष्ट है । मैंने एरो फ़ंक्शंस के साथ ज्यादा नहीं खेला है, लेकिन ऐसा लगता है कि यह अनाम फ़ंक्शंस के साथ आगे और पीछे जाने के लिए भ्रामक होगा।

— रोबिस्रोब

194

ट्रेसुर के साथ इसका कोई लेना-देना नहीं है और कुछ बंद कर रहा है, यह बस ईएस 6 कैसे काम करता है। यह विशिष्ट कार्यक्षमता है जिसे आप =>इसके बजाय उपयोग करके पूछ रहे हैं function () { }।

यदि आप ES6 लिखना चाहते हैं, तो आपको हर समय ES6 लिखने की आवश्यकता होती है, आप इसे कोड की कुछ पंक्तियों में नहीं बदल सकते, और आप निश्चित रूप से =>काम करने के तरीके को दबा या बदल नहीं सकते । यहां तक कि अगर आप कर सकते हैं, तो आप केवल जावास्क्रिप्ट के कुछ विचित्र संस्करण के साथ हवा देंगे, जो केवल आप समझते हैं और जो आपके अनुकूलित ट्रेसेर के बाहर सही तरीके से काम नहीं करेगा, जो निश्चित रूप से ट्रेसुर की बात नहीं है।

इस विशेष समस्या को हल करने का तरीका thisक्लिक किए गए तत्व तक पहुंच प्राप्त करने के लिए उपयोग नहीं करना है, बल्कि इसके बजाय उपयोग करना है event.currentTarget:

Class Game {
  foo(){
    this._pads.on('click', (event) => {
      if(this.go) {
        $(event.currentTarget).addClass('active');
      }
    });
  }
}

jQuery event.currentTargetविशेष रूप से प्रदान करता है, क्योंकि ES6 से पहले भी, jQuery के लिए thisकॉलबैक फ़ंक्शन (यानी, यदि यह किसी अन्य संदर्भ से जुड़ा हुआ था) पर लागू करना संभव नहीं है bind।

— मैगर
स्रोत

4

ध्यान दें, हालांकि यह केवल प्रत्यायोजित .onकॉल के लिए विचलन करता है, thisवास्तव में है event.currentTarget।

— loganfsmyth 18

क्या यह जवाब ठीक है? जैसे कि लोगनफ़्समीथ ने नोट किया, this== event.currentTarget। नहीं?

— लीन पेलेटियर

3

@ LéonPelletier नहीं thisऔर event.currentTargetजब तक thisES6 तीर फ़ंक्शन के साथ संलग्नक दायरे के लिए बाध्य नहीं होता है, तब तक वही होते हैं ।

— meagar

8

यदि आप कुछ कोड सहेजना चाहते हैं, तो आप इसे नष्ट भी कर सकते हैं: ({currentTarget}) => {$ (currentTarget) .addClass ('सक्रिय')}

— फ्रैंक 6

55

घटना बंधन

$button.on('click', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

लूप

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});

— रयान हुआंग
स्रोत

खोज रहे हैं $jQueryElements.each()? jQuery वास्तव में प्रत्येक वस्तु को कुछ तर्क भेजता है, इसलिए आपको इसकी बिल्कुल भी आवश्यकता नहीं है => यह है$(...).each((index, el) => console.log(el))

— jave.web

53

एक और मामला

शीर्ष उत्तर सही है और मैंने इसे मतदान किया है।

हालाँकि, एक और मामला है:

$('jquery-selector').each(() => {
    $(this).click();
})

के रूप में तय किया जा सकता है:

$('jquery-selector').each((index, element) => {
    $(element).click();
})

यह jQuery में एक ऐतिहासिक गलती है जो पहले तर्क के रूप में तत्व के बजाय, सूचकांक डालता है:

.each (फ़ंक्शन)

फ़ंक्शन
प्रकार: Function( Integer index, Element element )
प्रत्येक मिलान किए गए तत्व को निष्पादित करने के लिए एक फ़ंक्शन।

देखें: https://api.jquery.com/each/#each-function

— टायलर लंबा
स्रोत

1

इसी तरह के fucntions के लिए भी$('jquery-selector').map

— निकोलस Siegmundt

यह मेरे लिए $ ('jquery- चयनकर्ता') जैसी चीजों में उपयोग करने के लिए सुपर उपयोगी था। फ़िल्टर आदि ... इसे इतना स्पष्ट बनाने के लिए धन्यवाद।

— आर जोन्स

8

(यह एक उत्तर है जो मैंने इस प्रश्न के दूसरे संस्करण के लिए लिखा था, सीखने से पहले यह इस प्रश्न का डुप्लिकेट था। मुझे लगता है कि उत्तर स्पष्ट रूप से जानकारी को एक साथ खींचता है इसलिए मैंने इसे एक समुदाय विकि के रूप में जोड़ने का फैसला किया, हालांकि यह काफी हद तक सिर्फ अलग है अन्य उत्तरों का विवरण।)

आप नहीं कर सकते। यह तीर के कार्यों का आधा बिंदु है, वे thisअपने स्वयं के पास होने के बजाय बंद कर देते हैं कि वे कैसे कहलाते हैं। प्रश्न में उपयोग के मामले के लिए, यदि आप thisहैंडलर को कॉल करते समय jQuery द्वारा सेट करना चाहते हैं , तो हैंडलर को एक functionफ़ंक्शन होना चाहिए ।

लेकिन अगर आपके पास एक तीर का उपयोग करने का कारण है (शायद आप thisतीर के बाहर इसका क्या मतलब है, इसका उपयोग करना चाहते हैं ), तो आप e.currentTargetइसके बजाय उपयोग कर सकते हैं thisजैसे कि:

class Game {
  foo(){
    this._pads.on('click', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass('active');      // Using it
      }
    });
  }
}

currentTargetघटना वस्तु पर क्या jQuery सेट के रूप में ही है thisजब अपने हैंडलर बुला लिए।

— टीजे क्राउडर
स्रोत

5

जैसा कि मेज़र ने इसी सवाल पर अपने जवाब में कहा था कि यदि आप ईएस 6 लिखना चाहते हैं, तो आपको हर समय ईएस 6 लिखना होगा ।

इसलिए यदि आप ES6 के एरो फ़ंक्शन का उपयोग कर रहे हैं: (event)=>{}तो आपको $(event.currentTarget)इसके बजाय उपयोग करना होगा $(this)।

आप वर्तमान के रूप में उपयोग करने के लिए अधिक अच्छे और क्लीनर तरीके का उपयोग कर सकते हैं ({currentTarget})=>{},

Class Game {
  foo(){
    this._pads.on('click', ({currentTarget}) => {
      if(this.go) {
        $(currentTarget).addClass('active');
      }
    });
  }
}

मूल रूप से इस विचार को @ मीगर के उत्तर में rizzi फ्रैंक द्वारा टिप्पणी की गई थी , और मुझे यह उपयोगी लगा और मुझे लगता है कि सभी लोग उस टिप्पणी को नहीं पढ़ेंगे इसलिए मैंने इसे एक और उत्तर के रूप में लिखा है।

— हरितसिंह गोहिल
स्रोत

ES6 एरो फ़ंक्शंस के साथ jQuery $ (यह) का उपयोग करना

एक और मामला

.each (फ़ंक्शन)