javascript - क्या 'एरो फ़ंक्शंस' और 'फ़ंक्शंस' बराबर/विनिमेय हैं?



ecmascript-6 arrow-functions (1)

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.call(arguments);
  // ...
}

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

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

जैसा कि अक्सर: यह निर्भर करता है । फ़ंक्शन फ़ंक्शन / अभिव्यक्तियों की तुलना में एरो फ़ंक्शंस का व्यवहार अलग-अलग होता है, इसलिए पहले अंतरों पर एक नज़र डालते हैं:

1. लेजिकल this और arguments

एरो फ़ंक्शंस के पास अपना या arguments बंधन नहीं है। इसके बजाय, उन पहचानकर्ताओं को किसी अन्य चर की तरह शाब्दिक दायरे में हल किया जाता है। इसका मतलब है कि एक तीर फ़ंक्शन के अंदर, this और arguments this के मूल्यों और पर्यावरण में 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 का 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) साथ उपयोग किए जाने वाले कार्य .bind(this)

बदली नहीं :

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

अपने उदाहरणों का उपयोग करते हुए इसे करीब से देखें:

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

यह काम नहीं करेगा क्योंकि तीर फ़ंक्शन को new साथ नहीं बुलाया जा सकता है। फंक्शन डिक्लेरेशन / एक्सप्रेशन या यूज़ class का उपयोग करते रहें।

प्रोटोटाइप के तरीके

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

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

  getName() {
    return this.name;
  }
}

वस्तु विधियाँ

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

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

कॉलबैक

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

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

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

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

वेरिएडिक कार्य

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

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

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

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

  • मुझे ECMAScript 6 में एरो फ़ंक्शंस का उपयोग कब करना चाहिए?
  • क्या ES6 एरो फ़ंक्शंस के अपने तर्क हैं या नहीं?
  • ES6 एरो फ़ंक्शंस और फ़ंक्शन के साथ फ़ंक्शंस के बीच अंतर (यदि कोई हो) क्या हैं।
  • क्लास के तरीकों के रूप में एरो फ़ंक्शंस (पब्लिक क्लास फील्ड्स) का उपयोग कैसे करें?

आगे के संसाधन:





arrow-functions