javascript - जावास्क्रिप्ट में एकाधिक तीर कार्यों का क्या अर्थ है?





reactjs ecmascript-6 arrow-functions (5)


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

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

मैं react कोड का एक गुच्छा पढ़ रहा हूं और मुझे इस तरह की चीजें दिखाई देती हैं जिन्हें मैं समझ नहीं पा रहा हूं:

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



यह एक करीबी काम है

सबसे पहले, इस पैरामीटर को दो पैरामीटर के साथ जांचें ...

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

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

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

तीर कार्यों के बिना एक ही कोड 1 है ...

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

return पर ध्यान केंद्रित करें

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

let f = someParam => returnValue

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

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

दूसरे शब्दों में कुछ संख्या x एक फ़ंक्शन देता है

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

करीबी कार्यों को बुलाओ

तो हमारे करीबी कार्य का उपयोग करने के लिए, हमें इसे थोड़ा अलग तरीके से कॉल करना होगा ...

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

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

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

अपने कोड में हमारी नई समझ लागू करना

संबंधित: "बाध्यकारी, आंशिक अनुप्रयोग, और करी के बीच क्या अंतर है?"

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

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

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

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

हालांकि, क्योंकि तीर कार्य इसे लंबवत रूप से बांधते हैं, यह वास्तव में इस तरह दिखता है ...

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

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

ठंडा !

1 यहां मुझे इसे लंबवत रूप से बांधना नहीं था क्योंकि मूल add फ़ंक्शन किसी भी संदर्भ का उपयोग नहीं करता है, इसलिए इस मामले में इसे संरक्षित करना महत्वपूर्ण नहीं है।




तीर फ़ंक्शंस के उपलब्ध वाक्यविन्यासों को समझना आपको यह समझ देगा कि आपके द्वारा प्रदान किए गए उदाहरणों में 'जंजीर' की तरह वे किस व्यवहार को पेश कर रहे हैं।

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

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()
  }                        |                             |    }
}                          |  }                          |  }

तीर सिंटैक्स का उपयोग करके अज्ञात कार्यों को लिखने का एक अन्य लाभ यह है कि वे उस क्षेत्र के लिए लंबवत हैं जो उन्हें परिभाषित किया गया है। एमडीएन पर 'तीर फ़ंक्शंस' से :

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

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

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)             |  }



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

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

और फिर एक साथ:

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

दस्तावेज़ों से :

// 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



जैसा कि बताया गया है, आपको पूंजी "ओ" के साथ indexOf को कॉल करने की आवश्यकता है। यह भी ध्यान दिया जाना चाहिए कि जावास्क्रिप्ट क्लास में एक आरक्षित शब्द है, आपको इस डेटा विशेषता प्राप्त करने के लिए कक्षा नाम का उपयोग करने की आवश्यकता है। संभवतः यह असफल होने का कारण यह है कि यह एक शून्य मान लौटा रहा है। आप अपनी कक्षा मूल्य प्राप्त करने के लिए निम्नलिखित कर सकते हैं ...

var test = elm.getAttribute("className");
//or
var test = elm.className




javascript reactjs ecmascript-6 arrow-functions