जावास्क्रिप्ट क्लास सिंटैक्स और इसे तरीकों में बांधना [डुप्लिकेट]

Dec 09 2020

मैं मूल अंतर को समझना चाहता था कि नीचे के सिंटैक्स कैसे काम करते हैं।

// 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 स्वचालित रूप से बंधन को कैसे प्राप्त करने में सक्षम है?

मुझे लगता है कि यह समझ / वाक्यविन्यास किसी भी ढांचे के लिए बढ़ाया जा सकता है जिसमें रिएक्ट, कोणीय, एम्बर, आदि शामिल हैं

जवाब

1 CertainPerformance Dec 09 2020 at 11:52

क्लास फ़ील्ड - अर्थात, गुण सीधे क्लास बॉडी के अंदर परिभाषित होते हैं - अनिवार्य रूप से कंस्ट्रक्टर के अंदर एक ही चीज़ के लिए सिंटेक्स शुगर होते हैं। तो यह:

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तरह से गुज़र जाने पर कॉलिंग का सन्दर्भ समाप्त हो जाता है।