क्या करें जब "यह" संदर्भ लिंक खो देता है

नमस्कार, हेब्र! मैं आपको क्रिस्टी सालिस्कु द्वारा "यह" संदर्भ खो देता है "" क्या करना है , लेख का अनुवाद आपके सामने प्रस्तुत करता हूं ।

इस संदर्भ को खोने से बचने का सबसे अच्छा तरीका इसका उपयोग नहीं करना है। हालांकि, यह हमेशा संभव नहीं होता है। उदाहरण के लिए, हम किसी और के कोड या लाइब्रेरी के साथ काम करते हैं जो इसका उपयोग करता है ।

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

आइए कुछ मामलों को देखें।

नेस्टेड कार्य

यह नेस्टेड फ़ंक्शन के अंदर संदर्भ संदर्भ खो देता है।

class Service { constructor(){ this.numbers = [1,2,3]; this.token = "token"; } doSomething(){ setTimeout(function doAnotherThing(){ this.numbers.forEach(function log(number){ //Cannot read property 'forEach' of undefined console.log(number); console.log(this.token); }); }, 100); } } let service = new Service(); service.doSomething(); 

DoSomething () विधि के दो नेस्टेड कार्य हैं: doAnotherthing () और log () । जब service.doSomething () कॉल किया जाता है, तो यह नेस्टेड फ़ंक्शन में संदर्भ संदर्भ खो देता है।

बाँध ()

समस्या को हल करने का एक तरीका बाइंड () विधि के साथ है। निम्नलिखित कोड पर एक नज़र डालें:

 doSomething(){ setTimeout(function doAnotherThing(){ this.numbers.forEach(function log(number){ console.log(number); console.log(this.token); }.bind(this)); }.bind(this), 100); } 

बाइंड () फ़ंक्शन का एक नया संस्करण बनाता है, जिसे जब कॉल किया जाता है, तो इसका एक निश्चित मूल्य होता है।

function doAnotherThing () {/*..*/ Ideal.bind(this) doAnotherThing () फ़ंक्शन का एक संस्करण बनाता है, जो doSomething () से इसका मान लेता है।

वह / स्व

एक अन्य विकल्प यह है कि नए और उस स्वयं चर को घोषित करना और उसका उपयोग करना, जो इस मूल्य को doSomething () विधि से संग्रहीत करेगा।

 doSomething(){ let that = this; setTimeout(function doAnotherThing(){ that.numbers.forEach(function log(number){ console.log(number); console.log(that.token); }); }, 100); } 

हमें यह घोषित करना चाहिए कि = नेस्टेड फ़ंक्शन में इसका उपयोग करने वाले सभी तरीकों में।

तीर कार्य

तीर फ़ंक्शन हमें इस समस्या को हल करने का एक और तरीका देता है।

 doSomething(){ setTimeout(() => { this.numbers.forEach(number => { console.log(number); console.log(this.token); }); }, 100); } 

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

इस पद्धति का नुकसान यह है कि हम तीर फ़ंक्शन का नाम निर्दिष्ट नहीं कर सकते हैं। फ़ंक्शन का नाम एक महत्वपूर्ण भूमिका निभाता है, क्योंकि यह कोड की पठनीयता को बढ़ाता है और इसके उद्देश्य का वर्णन करता है।

नीचे एक चर नाम के संदर्भ में व्यक्त फ़ंक्शन के साथ समान कोड है:

 doSomething(){ let log = number => { console.log(number); console.log(this.token); } let doAnotherThing = () => { this.numbers.forEach(log); } setTimeout(doAnotherThing, 100); } 

कॉलबैक फ़ंक्शंस (कॉलबैक के रूप में विधि)

कॉलबैक फ़ंक्शन के रूप में विधि का उपयोग करते समय यह संदर्भ संदर्भ खो देता है। आइए निम्न वर्ग को देखें:

 class Service { constructor(){ this.token = "token"; } doSomething(){ console.log(this.token);//undefined } } let service = new Service(); 

आइए उन स्थितियों को देखें जिनमें कॉलबैक फ़ंक्शन के रूप में service.doSomething () विधि का उपयोग किया जाता है।

 //callback on DOM event $("#btn").click(service.doSomething); //callback for timer setTimeout(service.doSomething, 0); //callback for custom function run(service.doSomething); function run(fn){ fn(); } 

उपरोक्त सभी मामलों में, यह संदर्भ लिंक खो देता है।

बाँध ()

हम इस समस्या को हल करने के लिए बाइंड () का उपयोग कर सकते हैं। नीचे इस विकल्प का कोड है:

 //callback on DOM event $("#btn").click(service.doSomething.bind(service)); //callback for timer setTimeout(service.doSomething.bind(service), 0); //callback for custom function run(service.doSomething.bind(service)); 

तीर का कार्य

एक और तरीका है एक एरो फंक्शन बनाना जो कॉल करता है service.doSomething () ।

 //callback on DOM event $("#btn").click(() => service.doSomething()); //callback for timer setTimeout(() => service.doSomething(), 0); //callback for custom function run(() => service.doSomething()); 

प्रतिक्रिया घटक

घटकों में, यह संदर्भ संदर्भ खो देता है जब घटनाओं के लिए कॉलबैक के रूप में तरीकों का उपयोग किया जाता है।

 class TodoAddForm extends React.Component { constructor(){ super(); this.todos = []; } componentWillMount() { this.setState({desc: ""}); } add(){ let todo = {desc: this.state.desc}; //Cannot read property 'state' of undefined this.todos.push(todo); } handleChange(event) { //Cannot read property 'setState' of undefined this.setState({desc: event.target.value}); } render() { return <form> <input onChange={this.handleChange} value={this.state.desc} type="text"/> <button onClick={this.add} type="button">Save</button> </form>; } } ReactDOM.render( <TodoAddForm />, document.getElementById('root')); 

समाधान के रूप में, हम कंस्ट्रक्टर में नए फ़ंक्शन बना सकते हैं जो बाइंड (इस) का उपयोग करेंगे।

 constructor(){ super(); this.todos = []; this.handleChange = this.handleChange.bind(this); this.add = this.add.bind(this); } 

"यह" का उपयोग न करें

यह नहीं - संदर्भ के नुकसान के साथ कोई समस्या नहीं है। फैक्ट्री फ़ंक्शंस का उपयोग करके ऑब्जेक्ट बनाए जा सकते हैं। इस उदाहरण पर एक नज़र डालें:

 function Service() { let numbers = [1,2,3]; let token = "token"; function doSomething(){ setTimeout(function doAnotherThing(){ numbers.forEach(function log(number){ console.log(number); console.log(token); }); }, 100); } return Object.freeze({ doSomething }); } 

यदि आप कॉलबैक के रूप में विधि का उपयोग करते हैं तो संदर्भ बना रहता है।

 let service = Service(); service.doSomething(); //callback on DOM event $("#btn").click(service.doSomething); //callback for timer setTimeout(service.doSomething, 0); //callback for custom function run(service.doSomething); 

निष्कर्ष

यह विभिन्न स्थितियों में संदर्भ संदर्भ खो देता है।
बाइंड () , कि / सेल्फ वेरिएबल और एरो फ़ंक्शंस का उपयोग संदर्भ समस्याओं को हल करने के तरीके हैं।

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