javascript - तीर समारोह बनाम समारोह घोषणा / अभिव्यक्ति:क्या वे बराबर / विनिमय योग्य हैं?




ecmascript-6 arrow-functions (3)

टीएल; डॉ: नहीं! तीर फ़ंक्शंस और फ़ंक्शन घोषणाएं / अभिव्यक्ति समकक्ष नहीं हैं और उन्हें अंधेरे से बदला नहीं जा सकता है।
यदि आप जिस फ़ंक्शन को प्रतिस्थापित करना चाहते हैं, वह इसका उपयोग नहीं करता है, arguments और new नहीं कहा जाता है, फिर हां।

अक्सर के रूप में: यह निर्भर करता है । तीर कार्यों में फ़ंक्शन घोषणाओं / अभिव्यक्तियों की तुलना में अलग-अलग व्यवहार होते हैं, इसलिए पहले मतभेदों को देखें:

1. this arguments और arguments

तीर कार्यों में स्वयं का this arguments या arguments बाध्यकारी नहीं है। इसके बजाए, उन पहचानकर्ताओं को किसी अन्य चर की तरह शब्दावली के दायरे में हल किया जाता है। इसका मतलब है कि एक तीर फ़ंक्शन के अंदर, this और arguments पर्यावरण के arguments और arguments संदर्भ में तीर फ़ंक्शन को परिभाषित करते हैं (यानी "तीर फ़ंक्शन" के बाहर):

// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

फ़ंक्शन अभिव्यक्ति मामले में, this उस ऑब्जेक्ट को संदर्भित करता है जो createObject के अंदर बनाया गया था। तीर फ़ंक्शन केस में, this createObject स्वयं को संदर्भित करता है।

यदि आपको वर्तमान वातावरण के this तक पहुंचने की आवश्यकता है तो इससे तीर कार्य उपयोगी हो जाता है:

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

ध्यान दें कि इसका मतलब यह भी है कि तीर फ़ंक्शन को .bind या .call साथ सेट करना संभव नहीं है।

यदि आप इससे परिचित नहीं हैं, तो पढ़ने पर विचार करें

2. तीर कार्यों को new साथ नहीं बुलाया जा सकता है

ES2015 उन कार्यों के बीच अंतर करता है जो सक्षम सक्षम हैं और कार्य सक्षम हैं। यदि कोई कार्य रचनात्मक है, तो इसे new , यानी new User() साथ बुलाया जा सकता है। यदि कोई फ़ंक्शन कॉल करने योग्य है, तो इसे बिना new (यानी सामान्य फ़ंक्शन कॉल) कहा जा सकता है।

फ़ंक्शन घोषणाओं / अभिव्यक्तियों के माध्यम से बनाए गए फ़ंक्शंस दोनों रचनात्मक और कॉल करने योग्य हैं।
तीर कार्य (और विधियों) केवल कॉल करने योग्य हैं। class रचनाकार केवल रचनात्मक हैं।

यदि आप एक गैर-कॉल करने योग्य फ़ंक्शन को कॉल करने या गैर-रचनात्मक फ़ंक्शन बनाने का प्रयास कर रहे हैं, तो आपको रनटाइम त्रुटि मिल जाएगी।

यह जानकर, हम निम्नलिखित बता सकते हैं।

बदली:

  • कार्य जो this या arguments उपयोग नहीं करते हैं।
  • फ़ंक्शंस जिनका उपयोग .bind(this) साथ किया जाता है

प्रतिस्थापन योग्य नहीं :

  • कन्स्ट्रक्टर फ़ंक्शन
  • एक प्रोटोटाइप में जोड़ा गया फ़ंक्शन / विधियां (क्योंकि वे आमतौर पर इसका उपयोग this )
  • वैराडिक फ़ंक्शन (यदि वे arguments उपयोग करते arguments (नीचे देखें))

आइए आपके उदाहरणों का उपयोग करके इस पर नज़र डालें:

कन्स्ट्रक्टर फ़ंक्शन

यह काम नहीं करेगा क्योंकि तीर कार्यों को new साथ नहीं बुलाया जा सकता है। फ़ंक्शन घोषणा / अभिव्यक्ति या class का उपयोग करना जारी रखें।

प्रोटोटाइप विधियों

सबसे अधिक संभावना नहीं है, क्योंकि प्रोटोटाइप विधियों आमतौर पर उदाहरण का उपयोग this लिए इसका उपयोग करते हैं। अगर वे इसका उपयोग नहीं करते हैं, तो आप इसे बदल सकते हैं। हालांकि, यदि आप मुख्य रूप से संक्षिप्त वाक्यविन्यास की देखभाल करते हैं, तो अपने संक्षिप्त विधि वाक्यविन्यास के साथ class उपयोग करें:

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

ऑब्जेक्ट विधियों

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

const obj = {
  getName() {
    // ...
  },
};

कॉलबैक

निर्भर करता है। यदि आप बाहरी को अलियासिंग कर रहे हैं या इसका उपयोग कर रहे हैं तो आपको निश्चित रूप से इसे प्रतिस्थापित करना चाहिए। .bind(this) :

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

लेकिन: यदि कॉलबैक कॉल करने वाला कोड स्पष्ट रूप से this एक विशिष्ट मान पर सेट करता है, जैसा अक्सर ईवेंट हैंडलर के मामले में होता है, खासकर jQuery के साथ, और कॉलबैक this (या arguments ) का उपयोग करता है, तो आप तीर फ़ंक्शन का उपयोग नहीं कर सकते !

वैराडिक फ़ंक्शन

चूंकि तीर कार्यों में उनके स्वयं के arguments नहीं होते हैं, इसलिए आप उन्हें तीर फ़ंक्शन के साथ प्रतिस्थापित नहीं कर सकते हैं। हालांकि, ES2015 arguments का उपयोग करने के लिए एक विकल्प प्रस्तुत करता arguments : बाकी पैरामीटर

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

संबंधित प्रश्न:

  • ईसीएमएस्क्रिप्ट 6 में मुझे तीर कार्यों का उपयोग कब करना चाहिए?
  • क्या ईएस 6 तीर कार्यों के अपने तर्क हैं या नहीं?
  • ES6 तीर फ़ंक्शन और फ़ंक्शंस.प्रोटोटाइप.बिंड से जुड़े फ़ंक्शंस के बीच मतभेद (यदि कोई हैं) क्या हैं?
  • वर्ग विधियों में ES6 तीर का उपयोग कैसे करें?

आगे संसाधन:

कैनोनिकल प्रश्न यदि आपको तीर फ़ंक्शन के साथ फ़ंक्शन घोषणा / अभिव्यक्ति को बदलने के बाद समस्याओं के बारे में कोई प्रश्न मिलता है, तो कृपया इसे इस के डुप्लिकेट के रूप में बंद करें।

ES2015 में तीर कार्य एक संक्षिप्त संक्षिप्त वाक्यविन्यास प्रदान करते हैं। क्या मैं अब अपने सभी फ़ंक्शन घोषणाओं / अभिव्यक्तियों को तीर फ़ंक्शंस के साथ बदल सकता हूं? मुझे क्या देखना है?

उदाहरण:

कन्स्ट्रक्टर फ़ंक्शन

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

प्रोटोटाइप विधियों

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

वस्तु (शाब्दिक) तरीकों

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

कॉलबैक

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

वैराडिक फ़ंक्शन

function sum() {
  let args = [].slice(arguments);
  // ...
}

// vs
const sum = () => {
  let args = [].slice(arguments);
  // ...
};

इस Plnkr उदाहरण को देखो

वेरिएबल this बहुत अलग समय है बटन को कॉल करने पर प्रत्येक बार केवल 1 तक timesCalled जाता है। जो मेरे व्यक्तिगत प्रश्न का उत्तर देता है:

.click( () => { } )

तथा

.click(function() { })

दोनों लूप में उपयोग किए जाने पर समान संख्या में फ़ंक्शंस बनाते हैं क्योंकि आप Plnkr में ग्रिड गिनती से देख सकते हैं।


पहले जावास्क्रिप्ट में केवल दो स्कोप थे, यानी कार्यात्मक और वैश्विक। 'के साथ let' कीवर्ड जावास्क्रिप्ट अब शुरू की है block-levelचर।

'लेट' कीवर्ड की पूरी समझ रखने के लिए, ES6: जावास्क्रिप्ट में परिवर्तनीय घोषित करने के लिए कीवर्ड 'चलो' मदद करेगा।







javascript ecmascript-6 arrow-functions