ईएस 6 ऑब्जेक्ट्स में विधियां: तीर फ़ंक्शन का उपयोग करना

Question

ES6 में, ये दोनों कानूनी हैं:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

और, आशुलिपि के रूप में:

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

क्या नए तीर फ़ंक्शन का उपयोग करना संभव है? कुछ इस तरह की कोशिश में

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

या

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

मुझे एक त्रुटि संदेश मिला है जिसमें बताया गया है कि इस पद्धति तक पहुंच नहीं है this। क्या यह सिर्फ एक वाक्यविन्यास मुद्दा है, या आप ES6 ऑब्जेक्ट के अंदर वसा-पाइप विधियों का उपयोग नहीं कर सकते हैं?

Comments

नए फ़ंक्शन सिंटैक्स का सबसे बड़ा बिंदु यह था कि यह thisअलग तरह से व्यवहार करता है । यह शाब्दिक वातावरण द्वारा परिभाषित किया गया है जिसमें फ़ंक्शन बनाया गया था, जिसका अर्थ है thisकि आप chopperचर बनाते हैं जहां thisमान फ़ंक्शन का मूल्य होगा । दूसरे शब्दों में, यह chopperऑब्जेक्ट को संदर्भित नहीं करेगा ।

वसा तीर सिंटैक्स का उपयोग करते समय? केवल यदि आप thisपहले chopperऑब्जेक्ट बनाकर मूल्य को बदलते हैं , तो उस फ़ंक्शन में असाइनमेंट thisकरना जो उस ऑब्जेक्ट की ओर इशारा करता है। यह एक निर्माण कार्य के साथ बहुत सफाई से पूरा किया जा सकता है।

यह डेमो फ़ायरफ़ॉक्स में चलेगा। क्रोम में यह अभी तक नहीं है। jsfiddle.net/bfyarxfe

@fox, आपको उस jsfiddle पर 'उपयोग सख्त' का उपयोग करना चाहिए।

— वाल्टर चापिलिकेन - wZVanG

@fox: यह एक समर्थित वातावरण में ठीक काम करता है। फ़ायरफ़ॉक्स के पास अभी तक पूर्ण समर्थन नहीं है। कॉन्टिनम में इसे आज़माएं और console.log()विधि कॉल का परिणाम। यह काम करता हैं।

Answer 1

एरो फ़ंक्शंस को हर स्थिति में केवल पुराने जमाने के फ़ंक्शंस के छोटे संस्करण के रूप में उपयोग करने के लिए डिज़ाइन नहीं किया गया है। वे functionकीवर्ड का उपयोग करके फ़ंक्शन सिंटैक्स को बदलने के लिए अभिप्रेत नहीं हैं । तीर के कार्यों के लिए सबसे आम उपयोग का मामला छोटा "लंबोदा" है जो फिर से परिभाषित नहीं करता है this, अक्सर किसी फ़ंक्शन को कॉलबैक के रूप में किसी फ़ंक्शन को पास करते समय उपयोग किया जाता है।

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

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

आपके मामले में, किसी ऑब्जेक्ट पर एक विधि लिखना चाहते हैं, तो आपको बस पारंपरिक functionसिंटैक्स का उपयोग करना चाहिए , या ईएस 6 में पेश किया गया सिंटैक्स:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

(उनके बीच छोटे अंतर हैं, लेकिन वे केवल महत्वपूर्ण हैं यदि आप उपयोग करते superहैं getOwner, जो आप नहीं हैं, या यदि आप getOwnerकिसी अन्य ऑब्जेक्ट पर कॉपी करते हैं।)

एस्क फ़ंक्शंस पर एक मोड़ के बारे में es6 मेलिंग सूची पर कुछ बहस हुई थी जिसमें समान सिंटैक्स है लेकिन अपने स्वयं के साथ this। हालाँकि, इस प्रस्ताव को खराब रूप से प्राप्त किया गया था, क्योंकि यह मात्र सिंटेक्स चीनी है, जिससे लोग कुछ वर्णों को टाइप करने से बचा सकते हैं, और मौजूदा फ़ंक्शन सिंटैक्स पर कोई नई कार्यक्षमता प्रदान नहीं कर सकते हैं। विषय अनबाउंड एरो फ़ंक्शन देखें ।

Comments

यदि मैं इसे सही ढंग से पढ़ रहा हूं, तो यह सुझाव देता है कि मेलिंग सूची में सिंटैक्टिक शुगर को दर्शाया गया है, भले ही इससे कोड की अधिक एकरूपता / पठनीयता हो। के रूप में यह खड़ा है, यह बहुत अधिक चुनौतीपूर्ण है ES6 के तहत एक OOP संदर्भ में वसा-तीर फ़ंक्शन का उपयोग करना, जैसा कि कॉफ़ीस्क्रिप्ट के तहत कहा जाता है।

— फॉक्स

जैसा कि मैं इसे समझता हूं, वाक्यगत शर्करा को भाषा के विस्तार पर विचार करने का एक वैध कारण माना जाता है, लेकिन जैसा कि आप कम प्राथमिकता के साथ कहते हैं - दूसरे शब्दों में, ऐसे प्रस्तावों के लिए बार अधिक है।

Answer 2

इस लाइन में getOwner: => (this.owner)होना चाहिए:

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

आपको thisएक समारोह में घोषणा करनी होगी :

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

या:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

Comments

मुझे यहाँ एक त्रुटि मिल रही है:"TypeError: Cannot read property 'owner' of undefined\n at Object.chopper.getOwner

— फॉक्स

मैं देख रहा हूं, यह सही उपयोग है, हालांकि विधि एस्टा हमेशा विंडो ऑब्जेक्ट लौटाती है। आपको thisएक फ़ंक्शन के भीतर घोषणा करनी होगी ।

— वाल्टर चैपलिकेन - wZVanG

thisजरूरी नहीं कि देखें window। यह thisएनक्लोजिंग वातावरण में जो कुछ भी है, उसका वर्तमान मूल्य है, जो संदर्भित करता है या नहीं भी हो सकता है window। शायद आपका यही मतलब है। बस यह सुनिश्चित करना चाहते हैं कि वह समझता है कि यह कुछ डिफ़ॉल्ट मूल्य नहीं है।

@torazaburo वह मेरे लिए ठीक है, मैं इसे करने की कोशिश की, thisअब वर्ग को संदर्भित करता है

— वाल्टर Chapilliquen - wZVanG

आपने जो लिखा है, उसके बराबर है, लेकिन लिखने की तुलना में अधिक क्रियात्मक है var chopperFn = function() { this.owner = 'Jhon'; this.getOwner = () => this.owner; }।

Answer 3

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

• object.method()सिंटैक्स का उपयोग करने वाले तरीकों के लिए गैर-तीर फ़ंक्शंस का उपयोग करें । (वे कार्य हैं जो thisअपने कॉलर से सार्थक मूल्य प्राप्त करेंगे ।)
• लगभग सभी चीजों के लिए एरो फंक्शन का उपयोग करें।

Answer 4

यह एरो फ़ंक्शन फ़ंक्शन ऑब्जेक्ट के संदर्भ को प्रतिबिंबित नहीं करता है। इसके बजाय यह संदर्भ देता है जहां ऑब्जेक्ट विधि कहा जाता है।

यह जांचें, यह कुछ जानकारी देता है कि कब तीर का उपयोग करना है और कब नहीं। https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Answer 5

आप के लिए उपयोग तीर समारोह है, तो आप बदल सकते हैं thisकरने के लिए chopper,

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

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

Answer 6

एक अन्य टिप, सख्त मोड में, thisअभी भी अपरिभाषित के बजाय विंडो को संदर्भित करता है।

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();