तीर कार्य और यह

Question

मैं ES6 बाहर कोशिश कर रहा हूँ और जब मैं चलाने के लिए इस कोड को सांत्वना केवल my name is लॉग इसलिए

var person = { 
    name: "jason", 

    shout:() => console.log("my name is ", this.name) 
} 

person.shout() // Should print out my name is jason 

हालांकि तरह मेरे समारोह के अंदर एक संपत्ति, शामिल करना चाहते हैं। मैं क्या गलत कर रहा हूं?

Answer 1

संक्षिप्त उत्तर: this अंक निकटतम बाउंड this पर दिए गए कोड में this प्रदान किए गए कोड में संलग्न क्षेत्र में पाया गया है।

लंबे समय तक जवाब: तीर कार्यों बाँध उनके this जब वे बनाई गई हैंdo not have this, arguments or other special names bound at all - वस्तु बनाया जा रहा है जब नाम this, enclosing दायरे में पाया जाता है नहीं person वस्तु। आप घोषणा को ले जाकर अधिक स्पष्ट रूप से देख सकते हैं: (के लिए

var person = { 
    name = "Jason" 
}; 
var shout = function() { 
    console.log("Hi, my name is", this.name); 
}.bind(this); 
person.shout = shout; 

दोनों मामलों में, this:

var person = { 
    name = "Jason" 
}; 
person.shout =() => console.log("Hi, my name is", this); 

और यहां तक ​​कि और अधिक स्पष्ट जब ES5 में तीर वाक्य रचना के एक अस्पष्ट सन्निकटन में अनुवाद चिल्लाओ समारोह) person के समान दायरे को इंगित करता है, यह नया स्कोप नहीं है कि जब यह person ऑब्जेक्ट में जोड़ा जाता है तो यह नया स्कोप संलग्न होता है।

आप मेकअप तीर कार्यों कि जिस तरह से काम कर सकते हैं नहीं है, लेकिन, के रूप में @kamituel his answer में बताते हैं, आप ES6 में कम विधि घोषणा पैटर्न का लाभ लेने के समान अंतरिक्ष बचत प्राप्त करने के लिए कर सकते हैं:

var person = { 
    name: "Jason", 
    // ES6 "method" declaration - leave off the ":" and the "function" 
    shout() { 
    console.log("Hi, my name is", this.name); 
    } 
}; 

Answer 2

यहां फ़ंक्शन के अंदर इस का मान निर्धारित किया जाता है कि तीर फ़ंक्शन को परिभाषित नहीं किया जाता है, जहां इसका उपयोग नहीं किया जाता है।

तो this यदि अन्य नाम स्थान में लिपटे नहीं वैश्विक/खिड़की वस्तु को संदर्भित करता है

Answer 3

@Sean विएरा साथ सहमत - इस मामले में this के रूप में टिप्पणी में बताया वैश्विक वस्तु के लिए बाध्य है (या, अधिक सामान्य रूप से एक संलग्न गुंजाइश के लिए)।

यदि आप एक छोटा वाक्यविन्यास चाहते हैं, तो दूसरा विकल्प है - उन्नत ऑब्जेक्ट अक्षर संपत्ति कार्यों के लिए लघु वाक्यविन्यास का समर्थन करते हैं। this बाध्य होंगे जैसा आप वहां उम्मीद करते हैं। shout3() देखें:

window.name = "global"; 

var person = { 
    name: "jason", 

    shout: function() { 
     console.log("my name is ", this.name); 
    }, 
    shout2:() => { 
     console.log("my name is ", this.name); 
    }, 
    // Shorter syntax 
    shout3() { 
     console.log("my name is ", this.name); 
    } 
}; 

person.shout(); // "jason" 
person.shout2(); // "global" 
person.shout3(); // "jason" 

Answer 4

समस्या यह है कि (MDN)

एक तीर समारोह अभिव्यक्ति [...] lexically यह मान बांधता है।

तीर फ़ंक्शंस संलग्न संदर्भ के इस मान को कैप्चर करते हैं।

इसलिए, कि समारोह में this का मूल्य जहां वस्तु शाब्दिक बनाने this का मूल्य हो जाएगा। शायद, यह window गैर-सख्त मोड में और undefined सख्त मोड में होगा।

इसे ठीक करने के लिए, आप एक सामान्य समारोह का उपयोग करना चाहिए:

var person = { 
    name: "jason", 
    shout: function(){ console.log("my name is ", this.name) } 
} 
person.shout(); 

Answer 5

स्वीकार किए जाते हैं जवाब, उत्कृष्ट संक्षिप्त, और स्पष्ट है, लेकिन मैं क्या शॉन विएरा ने कहा कि पर एक छोटे से विस्तार से बता देगा:

तीर कार्यों में नहीं है, यह तर्क या अन्य विशेष नाम बिल्कुल बंधे हैं।

क्योंकि तीर फ़ंक्शन में "यह" नहीं है, यह माता-पिता के "यह" का उपयोग करता है। "यह" हमेशा माता-पिता को इंगित करता है, और व्यक्ति ऑब्जेक्ट का अभिभावक विंडो है (यदि आप ब्राउज़र में हैं)।

यह आपके कंसोल में इस चलाने साबित करने के लिए:

var person = { 
    name: "Jason", 
    anotherKey: this 
} 
console.log(person.anotherKey) 

आप विंडो वस्तु मिल जाएगा।

मुझे यह इसके बारे में सोचने का एक बहुत ही उपयोगी तरीका लगता है। यह पूरी कहानी नहीं है, जैसा कि किसी ऑब्जेक्ट का "यह" शब्दशः एक और चर्चा है।