जावास्क्रिप्ट में एकाधिक तीर फ़ंक्शंस का क्या अर्थ है?

Question

मैं react कोड का एक समूह पढ रहा हूं और मैं इस तरह सामान है कि मुझे समझ नहीं आता देखें: इस तरह यह

handleChange = field => e => { 
    e.preventDefault(); 
    /// Do something here 
} 

Answer 1

Think, हर बार जब आप एक तीर दिखाई दे, तो आप इसे function के साथ बदलें।
function parameters तीर से पहले परिभाषित किया गया है।
तो अपने उदाहरण में:

field => // function(field){} 
e => { e.preventDefault(); } // function(e){e.preventDefault();} 

और फिर एक साथ:

function (field) { return function (e) { e.preventDefault(); }; } 

From the docs:

// Basic syntax: 
(param1, param2, paramN) => { statements } 
(param1, param2, paramN) => expression 
    // equivalent to: => { return expression; } 

// Parentheses are optional when there's only one argument: 
singleParam => { statements } 
singleParam => expression 

Answer 2

available syntaxes of arrow functions समझना कि तुम क्या व्यवहार वे जब शुरू कर रहे हैं की समझ दे देंगे आपके द्वारा प्रदान किए गए उदाहरणों की तरह 'जंजीर'।

जब एक तीर समारोह के साथ या एक से अधिक पैरामीटर के बिना ब्लॉक ब्रेसिज़ बिना लिखा है,, अभिव्यक्ति है कि गठन समारोह के शरीर परोक्ष वापस लौटा है। आपके उदाहरण में, अभिव्यक्ति एक और तीर कार्य है।

No arrow funcs    Implicitly return `e=>{…}` Explicitly return `e=>{…}` 
--------------------------------------------------------------------------------- 
function (field) {   | field => e => {   | field => { 
    return function (e) { |        | return e => { 
     e.preventDefault() | e.preventDefault()  |  e.preventDefault() 
    }      |        | } 
}       | }       | } 

तीर सिंटैक्स का उपयोग अनाम प्रक्रियाएं लेखन का एक और लाभ यह है कि वे गुंजाइश जिसमें वे परिभाषित कर रहे हैं करने के लिए बाध्य कर रहे हैं lexically है। 'Arrow functions' on MDN से:

एक तीर समारोह अभिव्यक्तिfunction expressions की तुलना में एक छोटा वाक्यविन्यास है और lexically this मूल्य बांधता है। तीर कार्य हमेशा anonymous होते हैं।

इस पर विचार है कि यह एक reactjs आवेदन से लिया जाता है अपने उदाहरण में विशेष रूप से प्रासंगिक है। जैसा कि @ नोमिक द्वारा इंगित किया गया है, वास्तव में आप अक्सर this का उपयोग करके एक्सेस करते हैं।उदाहरण के लिए:

Unbound      Explicitly bound   Implicitly bound 
------------------------------------------------------------------------------ 
function (field) {   | function (field) {  | field => e => { 
    return function (e) { | return function (e) { |  
     this.setState(...) |  this.setState(...) | this.setState(...) 
    }      | }.bind(this)   |  
}       | }.bind(this)    | } 

Answer 3

एक curried function

पहले, इस दो पैरामीटर है & hellip के साथ समारोह की जांच है कि;

let add = (x,y) => x + y; 
add(2,3); //=> 5 

यहां यह फिर से करीबी रूप और नरक में है;

let add = x => y => x + y; 

यहाँ एक ही कोड तीर कार्यों है & hellip के बिना है;

let add = function (x) { 
    return function (y) { 
    return x + y; 
    }; 
}; 

---

फोकस पर return

यह मदद कर सकता है यह एक और तरीका है कल्पना करने के लिए। हम जानते हैं कि तीर कार्य इस तरह काम करते हैं - चलिए वापसी मूल्य पर विशेष ध्यान दें।

let f = someParam =>returnValue

इसलिए हमारे add फ़ंक्शन एक समारोह - हम जोड़ा स्पष्टता के लिए कोष्ठक का उपयोग कर सकते हैं। बोल्ड पाठ हमारे समारोह add

let add = x =>(y => x + y)

के रिटर्न मान दूसरे शब्दों कुछ नंबर एक समारोह

let x = 2; 
add (2) // returns (y => 2 + y) 

---

रिटर्न x की add curried कार्यों कॉलिंग

में है तो हमारे सी का उपयोग करने के लिए चिंतित कार्य, हमें इसे थोड़ा अलग और नरक कहते हैं;

add(2)(3); // returns 5 

ऐसा इसलिए है क्योंकि पहला (बाहरी) फ़ंक्शन कॉल दूसरा (आंतरिक) फ़ंक्शन देता है। दूसरे फ़ंक्शन को कॉल करने के बाद ही हम वास्तव में परिणाम प्राप्त करते हैं।अगर हम कॉल को दो लाइनों और नरक पर अलग करते हैं तो यह अधिक स्पष्ट है;

let add2 = add(2); // returns function(y) { return 2 + y } 
add2(3);   // returns 5 

---

अपने कोड

संबंधित के लिए हमारी नई समझ आवेदन: ”What’s the difference between binding, partial application, and currying?”

ठीक है, अब हम समझते हैं कि यह कैसे काम करता है, के लिए अपने कोड

को देखो

handleChange = field => e => { 
    e.preventDefault(); 
    /// Do something here 
} 

हम तीर कार्यों और नरक का उपयोग किए बिना इसका प्रतिनिधित्व करके शुरू करेंगे;

handleChange = function(field) { 
    return function(e) { 
    e.preventDefault(); 
    // Do something here 
    // return ... 
    }; 
}; 

हालांकि, क्योंकि तीर कार्यों lexically this बाध्य है, यह होगा वास्तव में देखो यह है & hellip की तरह अधिक;

handleChange = function(field) { 
    return function(e) { 
    e.preventDefault(); 
    // Do something here 
    // return ... 
    }.bind(this); 
}.bind(this); 

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

कूल!

---

यहाँ मैं lexically बाँध this क्योंकि मूल add समारोह किसी भी संदर्भ का उपयोग नहीं करता नहीं था, इसलिए यह महत्वपूर्ण इस मामले में इसे संरक्षित करने के नहीं है।

Answer 4

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

Answer 5

एक सामान्य युक्ति, यदि आप किसी भी नए जेएस सिंटैक्स द्वारा भ्रमित हो जाते हैं और यह कैसे संकलित होगा, तो आप babel देख सकते हैं। उदाहरण के कोलाहल में अपने कोड को कॉपी करने और es2015 सेट का चयन करने के लिए इस

handleChange = function handleChange(field) { 
return function (e) { 
e.preventDefault(); 
    // Do something here 
    }; 
};