जावास्क्रिप्ट एरो फंक्शन
ES6 में एरो फ़ंक्शंस पेश किए गए थे।
एरो फ़ंक्शंस हमें छोटे फ़ंक्शन सिंटैक्स लिखने की अनुमति देते हैं:
let myFunction = (a, b) => a * b;
पहले:
hello = function() {
return "Hello World!";
}
तीर समारोह के साथ:
hello = () => {
return "Hello World!";
}
यह छोटा हो जाता है! यदि फ़ंक्शन में केवल एक कथन है, और कथन एक मान देता है, तो आप कोष्ठक औरreturn कीवर्ड को
हटा सकते हैं:
डिफ़ॉल्ट रूप से एरो फ़ंक्शंस रिटर्न वैल्यू:
hello = () => "Hello World!";
नोट: यह तभी काम करता है जब फंक्शन में केवल एक स्टेटमेंट हो।
यदि आपके पास पैरामीटर हैं, तो आप उन्हें कोष्ठक के अंदर पास करते हैं:
पैरामीटर्स के साथ एरो फंक्शन:
hello = (val) => "Hello " + val;
वास्तव में, यदि आपके पास केवल एक पैरामीटर है, तो आप कोष्ठक को भी छोड़ सकते हैं:
किस बारे में this?
thisनियमित कार्यों की तुलना में तीर कार्यों में हैंडलिंग भी भिन्न होती है।
संक्षेप में, तीर कार्यों के साथ कोई बंधन नहीं है
this।
नियमित कार्यों में thisकीवर्ड उस वस्तु का प्रतिनिधित्व करता है जिसे फ़ंक्शन कहा जाता है, जो कि विंडो, दस्तावेज़, एक बटन या जो कुछ भी हो सकता है।
एरो फंक्शन के साथ thisकीवर्ड हमेशा उस ऑब्जेक्ट का प्रतिनिधित्व करता है जो एरो फंक्शन को परिभाषित करता है।
आइए अंतर को समझने के लिए दो उदाहरण देखें।
दोनों उदाहरण एक विधि को दो बार कॉल करते हैं, पहली बार जब पृष्ठ लोड होता है, और एक बार फिर जब उपयोगकर्ता एक बटन पर क्लिक करता है।
पहला उदाहरण एक नियमित फ़ंक्शन का उपयोग करता है, और दूसरा उदाहरण एक तीर फ़ंक्शन का उपयोग करता है।
परिणाम दिखाता है कि पहला उदाहरण दो अलग-अलग ऑब्जेक्ट (विंडो और बटन) देता है, और दूसरा उदाहरण विंडो ऑब्जेक्ट को दो बार लौटाता है, क्योंकि विंडो ऑब्जेक्ट फ़ंक्शन का "स्वामी" है।
उदाहरण
एक नियमित फ़ंक्शन के साथ thisउस ऑब्जेक्ट का प्रतिनिधित्व करता है जो फ़ंक्शन को कॉल करता है:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
उदाहरण
एक तीर फ़ंक्शन के साथ फ़ंक्शन के स्वामीthis का प्रतिनिधित्व
करता है:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
इन अंतरों को याद रखें जब आप कार्यों के साथ काम कर रहे हों। कभी-कभी नियमित कार्यों का व्यवहार वही होता है जो आप चाहते हैं, यदि नहीं, तो तीर कार्यों का उपयोग करें।
ब्राउज़र समर्थन
निम्न तालिका जावास्क्रिप्ट में एरो फ़ंक्शंस के लिए पूर्ण समर्थन के साथ पहले ब्राउज़र संस्करणों को परिभाषित करती है:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |