ECMAScript 6 में एरो फ़ंक्शंस

नए ECMAScript 6 मानक के सबसे दिलचस्प भागों में से एक तीर फ़ंक्शन है। एरो फ़ंक्शंस, जैसा कि नाम से पता चलता है, तीर => का उपयोग करने वाले नए सिंटैक्स द्वारा परिभाषित किया गया है। हालांकि, उत्कृष्ट सिंटैक्स के अलावा, तीर फ़ंक्शन अन्य पहलुओं में पारंपरिक कार्यों से भिन्न होते हैं:

• लयबद्ध बंधन। विशेष चर , सुपर, और तर्कों के मानों को यह निर्धारित नहीं किया जाता है कि तीर फ़ंक्शन को कैसे कहा जाता है, बल्कि वे कैसे बनाए गए थे।
• यह , सुपर और तर्कों को अपरिवर्तनीय। फ़ंक्शन के पूरे जीवन चक्र में तीर फ़ंक्शन के भीतर इन चर के मूल्य अपरिवर्तित रहते हैं।
• एरो फ़ंक्शंस का इस्तेमाल कंस्ट्रक्टर के रूप में नहीं किया जा सकता है और नए ऑपरेटर के साथ उपयोग करने पर कोई त्रुटि हो सकती है।
• तर्क चर के "अपने" मूल्य की दुर्गमता।

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


नोट: यह लेख अंडरस्टैंडिंग ECMAScript 6 एरो फ़ंक्शंस लेख के नि: शुल्क अनुवाद और नवीनतम ड्राफ्ट विनिर्देश (20 जनवरी 2014 ड्राफ्ट रेव 22) को पढ़ने से एक संकलन है।

सामग्री की तालिका

• वाक्य-विन्यास
  • एक पैरामीटर
  • कई मापदंडों
  • कोई पैरामीटर नहीं
  • पारंपरिक फ़ंक्शन बॉडी सिंटैक्स
  • वस्तु शाब्दिक
  • मापदंडों की परिवर्तनीय संख्या
  • पैरामीटर के रूप में विनाशकारी टेम्पलेट
• तीर के कार्यों का उपयोग करना
  • संदर्भ सेट करना
  • एकाधिक कॉल के बीच संदर्भ स्क्रॉल करना
  • एक तर्क के रूप में उपयोग करें
• तीर की अन्य विशेषताएं
• परिणाम

वाक्य-विन्यास

---

सामान्य तौर पर, तीर फ़ंक्शन का सिंटैक्स इस तरह दिखता है:

 var fun = (x) => x; 

यह स्काला, कॉफीस्क्रिप्ट जैसी भाषाओं में समान सिंटैक्स और सी # से लैम्ब्डा अभिव्यक्तियों के वाक्य विन्यास के समान है।

तीर फ़ंक्शन का सिंटैक्स भिन्न हो सकता है, यह इस बात पर निर्भर करता है कि आप फ़ंक्शन कैसे घोषित करते हैं। एक घोषणा हमेशा तर्कों की एक सूची के साथ शुरू होती है, उसके बाद फ़ंक्शन का तीर और शरीर। आप जो लिखते हैं उसके आधार पर तर्क सूची और फ़ंक्शन के शरीर का एक अलग आकार हो सकता है।

एक पैरामीटर

एक एरो फ़ंक्शन की घोषणा करना जो एक तर्क लेता है और बस रिटर्न करता है यह बहुत सरल दिखता है:

 var reflect = value => value; //  var reflect = function(value) { return value; } 

जब एक तीर फ़ंक्शन में केवल एक तर्क होता है, तो इसे बिना कोष्ठक के घोषित किया जा सकता है। फ़ंक्शन का शरीर तीर के बाद भी घुंघराले ब्रेसिज़ के बिना हो सकता है और इसमें वापसी कीवर्ड नहीं हो सकता है।

कई मापदंडों

लेकिन यदि आप एक से अधिक पैरामीटर घोषित करना चाहते हैं, तो आपको कोष्ठक में पैरामीटर सूची को फ्रेम करना होगा:

 var sum = (num1, num2) => num1 + num2; //  var sum = function(num1, num2) { return num1 + num2; }; 

sum फ़ंक्शन केवल दो तर्कों को दर्शाता है। पिछले उदाहरण से एकमात्र अंतर कोष्ठक और एक अल्पविराम (पारंपरिक कार्यों की तरह) की उपस्थिति है।

कोई पैरामीटर नहीं

इसी तरह, बिना किसी तर्क के एक फ़ंक्शन को कोष्ठक में संलग्न एक खाली पैरामीटर सूची होनी चाहिए:

 var sum = () => 1 + 2; //  var sum = function() { return 1 + 2; }; 

पारंपरिक फ़ंक्शन बॉडी सिंटैक्स

आप तीर फ़ंक्शन बॉडी के लिए पारंपरिक फ़ंक्शन के सिंटैक्स का उपयोग कर सकते हैं जब इसमें एक से अधिक एक्सप्रेशन हों। यही है, फ़ंक्शन को ब्रेसिज़ में लपेटें और रिटर्न कीवर्ड जोड़ें:

 var sum = (num1, num2) => { return num1 + num2; } //  var sum = function(num1, num2) { return num1 + num2; }; 

फ़ंक्शन के मुख्य भाग को उसी तरह से संसाधित किया जाएगा जैसे कि शास्त्रीय कार्यों के मामले में, विशेष चर के मूल्यों को छोड़कर, सुपर और तर्कों को अलग-अलग गणना की जाएगी।

वस्तु शाब्दिक

अलग-अलग, यह उल्लेख किया जाना चाहिए कि एक फ़ंक्शन के शरीर में घुंघराले कोष्ठक नहीं होते हैं और बस एक वस्तु शाब्दिक रिटर्न को कोष्ठक में लिया जाना चाहिए:

 var getTempItem = id => ({ id: id, name: "Temp" }); //  var getTempItem = function(id) { return { id: id, name: "Temp" } }; 

कोष्ठक में वस्तु शाब्दिक रूप से रखना पार्सर को इंगित करता है कि घुंघराले ब्रेसिज़ फ़ंक्शन बॉडी के लिए पारंपरिक वाक्यविन्यास की शुरुआत नहीं है, लेकिन शाब्दिक की शुरुआत है।

मापदंडों की परिवर्तनीय संख्या

चूँकि तीर फ़ंक्शन के अंदर "मूल" तर्क ऑब्जेक्ट सुलभ नहीं है ( तर्कों का मान पारंपरिक रूप से तीर के कार्य के रूप में घोषित किया गया था) के तर्कों के मूल्य से संबंधित है, तो मापदंडों के एक चर संख्या के साथ बाकी कार्यों के लिए, आपको विनाशकारी पैटर्न से बाकी पैटर्न का उपयोग करने की आवश्यकता है। एक उदाहरण:

 var getTempItems = (...rest) => rest; //  var getTempItems = function() { return [].slice.apply(arguments) }; 

पैरामीटर के रूप में विनाशकारी टेम्पलेट

इस लेख में, हम विनाशकारी पैटर्न पर विचार नहीं करते हैं - आप उनके बारे में लेख में पढ़ सकते हैं ECMAScript 6, जावास्क्रिप्ट के अगले संस्करण का अवलोकन , हालांकि यह जानकारी आंशिक रूप से पुरानी है।

जैसा कि आप पिछले उदाहरण से देख सकते हैं, इस तथ्य के बावजूद कि तीर फ़ंक्शन का केवल एक तर्क है, फ़ंक्शन के एकमात्र पैरामीटर के रूप में विनाशकारी पैटर्न का उपयोग करते समय कोष्ठक का उपयोग करना आवश्यक है। अन्य टेम्पलेट्स के उदाहरण:

 var a = ({a}) => a; var b = ([b]) => b; 

तीर के कार्यों का उपयोग करना

---

संदर्भ सेट करना

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

 var pageHandler = { id: "123456" , init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); //  }); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } }; 

उपरोक्त कोड में, pageHandler ऑब्जेक्ट को पृष्ठ पर क्लिक संभालना चाहिए। init() विधि वांछित घटना पर हैंडलर को this.doSomething() , जिसे आंतरिक रूप से यह कॉल this.doSomething() । हालाँकि, कोड सही तरीके से काम नहीं करेगा। this.doSomething() संदर्भ मान्य नहीं है, क्योंकि यह नियोजित pageHandler बजाय इवेंट हैंडलर के अंदर document ऑब्जेक्ट को pageHandler । जब आप इस कोड को निष्पादित करने का प्रयास करते हैं, तो आपको एक त्रुटि मिलेगी क्योंकि document ऑब्जेक्ट में doSomething विधि नहीं है।

आप इसे pageHandler ऑब्जेक्ट को pageHandler का उपयोग handleEvent या फ़ंक्शन के मानक bind() विधि से कॉल कर सकते bind() :

 var pageHandler = { id: "123456" , init: function() { document.addEventListener("click", (function(event) { this.doSomething(event.type); // error }).bind(this)); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } }; 

अब कोड इरादा के अनुसार काम करता है, लेकिन यह अधिक भारी लगता है। इसके अलावा, हर बार bind(this) कॉल bind(this) आप एक नया फ़ंक्शन बनाते हैं जिसका मान pageHandler मान से बंधा होता है, लेकिन कोड आपके इच्छित तरीके से काम करता है।

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

 var pageHandler = { id: "123456" , init: function() { document.addEventListener("click", event => this.doSomething(event.type)); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } }; 

इस उदाहरण में, एक हैंडलर एक तीर फ़ंक्शन है जिसमें this.doSomething() । इसका मान init() फ़ंक्शन के समान होगा, और इस उदाहरण में कोड bind() द्वारा उपयोग किए गए के समान सही ढंग से काम करेगा। भले ही यह करने के लिए this.doSomething() एक मान लौटाता है या नहीं, तीर फ़ंक्शन के शरीर के अंदर की अभिव्यक्ति को घुंघराले ब्रेस में संलग्न करने की आवश्यकता नहीं है।

इसके अलावा, उपरोक्त उदाहरण bind() कॉल bind() से भी अधिक कुशल है, क्योंकि एक ब्राउज़र के लिए यह निम्न कोड के समान है:

 var pageHandler = { id: "123456" , init: function() { var self = this; document.addEventListener("click", function(event) { return self.doSomething(event.type) }); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } }; 

यही है, एक नया फ़ंक्शन नहीं बनाया गया है, जैसा कि bind() कॉल के साथ होता है।

एकाधिक कॉल के बीच संदर्भ स्क्रॉल करना

जाहिर है, आप एक तीर का काम दूसरे में कर सकते हैं, जिससे उनके माध्यम से "फेंक":

 var obj = { arr1: [1, 2, 3] , arr2: ['a', 'b', 'c'] , concatenate: function(a, b){ return a + "|" + b } , intersection: function() { return this.arr1.reduce( (sum, v1) => // arrow function 1 this.arr2.reduce( (sum, v2) => { // arrow function 2 sum.push( this.concatenate( v1, v2 ) ) return sum; } , sum ) , [] ) } }; var arrSum = obj.intersection();//['1|a', '1|b', '1|c', '2|a', '2|b', '2|c', '3|a', '3|b', '3|c'] 

एक तर्क के रूप में उपयोग करें

तीर के कार्यों का संक्षिप्त वाक्य-विन्यास उन्हें अन्य कार्यों के लिए तर्क के रूप में पारित करने के लिए आदर्श उम्मीदवार बनाता है। उदाहरण के लिए, यदि आप किसी सरणी को क्रमबद्ध करना चाहते हैं, तो आप आमतौर पर ऐसा कुछ लिखते हैं:

 var result = values.sort(function(a, b) { return a - b }); 

एक सरल ऑपरेशन के लिए काफी क्रिया। एक छोटी प्रविष्टि तीर फ़ंक्शन के साथ तुलना करें:

 var result = values.sort((a, b) => a - b); 

बड़े पैमाने पर sort() , map() , reduce() और इसी sort() तरीकों का उपयोग करके छोटे तीर फ़ंक्शन सिंटैक्स का उपयोग करके सरलीकृत किया जा सकता है।

तीर की अन्य विशेषताएं

---

इस तथ्य के बावजूद कि तीर के कार्य पारंपरिक कार्यों से भिन्न होते हैं, उनके पास सामान्य विशेषताएं हैं:

• typeof ऑपरेटर तीर फ़ंक्शन के लिए "function" देता है
• एरो फंक्शन भी "क्लास" फंक्शन का एक उदाहरण है, इसलिए instanceof पारंपरिक समारोह के साथ ही काम करेगा
• आप अभी भी call() , apply() , और bind() विधियों का उपयोग कर सकते हैं, लेकिन याद रखें कि वे इस के मूल्य को प्रभावित नहीं करेंगे
• आप toMethod() विधि का उपयोग कर सकते हैं, हालांकि यह सुपर के मान को नहीं बदलेगा ( toMethod() विधि es6 में पेश की गई है और इस लेख में विचार नहीं किया गया है )।

पारंपरिक कार्यों से एक महत्वपूर्ण अंतर यह है कि नए ऑपरेटर के साथ एक तीर फ़ंक्शन को कॉल करने का प्रयास एक रनटाइम त्रुटि का कारण होगा।

परिणाम

---

एरो फ़ंक्शंस ECMAScript 6 में सबसे दिलचस्प नवाचारों में से एक है, जो एक छोटी परिभाषा वाक्यविन्यास है, फ़ंक्शन के हस्तांतरण को दूसरे फ़ंक्शन के पैरामीटर मान के रूप में सरल करेगा।

लैकोनिक सिंटैक्स आपको जटिल चीजें लिखने की अनुमति देता है और भी कठिन आसान। उदाहरण के लिए, यह एक पहचानकर्ता जनरेटर की तरह दिखेगा (जो es5 पर बहुत अधिक क्रिया दिखता है ):

 let idGen = (start = 0, id = start, reset = (newId = start) => id = newId, next = () => id++) => ({reset, next}); let gen = idGen(100); console.log(gen.next(), gen.next(), gen.reset(10), gen.next());//100 101 10 10 

और लेक्सिकल बाइंडिंग डेवलपर्स के लिए दर्द और हताशा के सबसे बड़े स्रोतों में से एक को बंद कर देगा, साथ ही साथ जेएस इंजन के स्तर पर अनुकूलन के कारण उत्पादकता में सुधार करेगा।

यदि आप तीर फ़ंक्शन को आज़माना चाहते हैं, तो आप उपरोक्त उदाहरणों को फ़ायरफ़ॉक्स कंसोल में चला सकते हैं, जो वर्तमान में (02.2014 FF28) तीर फ़ंक्शन का लगभग पूर्ण समर्थन करता है (FF28 सही ढंग से तर्क मान की गणना नहीं करता है)।

आप ऑनलाइन ट्रेसेर ट्रांसलेटर में एस्क 6 के एरो फ़ंक्शंस और अन्य विशेषताओं को भी आज़मा सकते हैं।