जावास्क्रिप्ट क्लास सिंटैक्स और इसे तरीकों में बांधना [डुप्लिकेट]
मैं मूल अंतर को समझना चाहता था कि नीचे के सिंटैक्स कैसे काम करते हैं।
// Syntax 1
class Component extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
// ...
}
}
// Syntax 2
handleClick = () => {
console.log('this is:', this)
}
<button onClick={this.handleClick}>
{'Click me'}
</button>
जबकि सिंटैक्स 1 को कंस्ट्रक्टर के अंदर निर्दिष्ट करने के लिए एक स्पष्ट बंधन की आवश्यकता होती है। हालाँकि, ऐसा लगता है कि सिंटैक्स 2 के साथ, इसकी आवश्यकता नहीं है। सिंटैक्स 2 स्वचालित रूप से बंधन को कैसे प्राप्त करने में सक्षम है?
मुझे लगता है कि यह समझ / वाक्यविन्यास किसी भी ढांचे के लिए बढ़ाया जा सकता है जिसमें रिएक्ट, कोणीय, एम्बर, आदि शामिल हैं
जवाब
क्लास फ़ील्ड - अर्थात, गुण सीधे क्लास बॉडी के अंदर परिभाषित होते हैं - अनिवार्य रूप से कंस्ट्रक्टर के अंदर एक ही चीज़ के लिए सिंटेक्स शुगर होते हैं। तो यह:
class Something {
handleClick = () => {
console.log('this is:', this)
}
}
निराश है:
class Something {
constructor() {
this.handleClick = () => {
console.log('this is:', this)
};
}
}
निकाले गए चीनीकरण के साथ, यह स्पष्ट होना चाहिए कि क्या चल रहा है - तीर फ़ंक्शन का मतलब है कि निर्माणकर्ता में जो this
संदर्भित है this
, जो कि स्वयं उदाहरण है, कोई बंधन की आवश्यकता नहीं है।
यह सिर्फ एक रिएक्ट या फ्रेमवर्क चीज नहीं है - ये वैनिला जावास्क्रिप्ट में मानक नियम हैं।
यदि आप विधि को बाँधते नहीं हैं या तीर फ़ंक्शन या उस जैसी किसी चीज़ का उपयोग करते हैं, तो:
<button onClick={this.handleClick}>
उसी कारण से विफल रहता है
someButton.addEventListener('click', myObj.someFn)
someFn
कॉलिंग के संदर्भ के साथ कॉल करने में भी विफल रहेगा myObj
- सभी ब्राउज़र को पता है कि कॉलबैक को क्लिक श्रोता को कॉल करना है; उस myObj
तरह से गुज़र जाने पर कॉलिंग का सन्दर्भ समाप्त हो जाता है।