'यह' जावास्क्रिप्ट क्लास विधियों में अपरिभाषित है

Question

मैं जावास्क्रिप्ट के लिए नया हूं। जहां तक ​​मैंने वास्तव में इसके साथ किया है, नया कोड मौजूदा कोड में tweaked है और jQuery के छोटे बिट्स लिखा है।

अब मैं विशेषताओं और विधियों के साथ "कक्षा" लिखने का प्रयास कर रहा हूं, लेकिन मुझे तरीकों से परेशानी हो रही है। मेरे कोड:

function Request(destination, stay_open) { 
    this.state = "ready"; 
    this.xhr = null; 
    this.destination = destination; 
    this.stay_open = stay_open; 

    this.open = function(data) { 
     this.xhr = $.ajax({ 
      url: destination, 
      success: this.handle_response, 
      error: this.handle_failure, 
      timeout: 100000000, 
      data: data, 
      dataType: 'json', 
     }); 
    }; 

    /* snip... */ 

} 

Request.prototype.start = function() { 
    if(this.stay_open == true) { 
     this.open({msg: 'listen'}); 
    } else { 

    } 
}; 
//all console.log's omitted 

समस्या है, Request.prototype.start में, this अपरिभाषित है और इस प्रकार अगर बयान गलत का आकलन। मुझसे यहां क्या गलत हो रहा है?

Answer 1

आप स्टार्ट फ़ंक्शन को कैसे कॉल कर रहे हैं?

यह काम करना चाहिए

var o = new Request(destination, stay_open); 
o.start(); 

आप सीधे Request.prototype.start() की तरह इसे कहते हैं, this वैश्विक संदर्भ (window ब्राउज़रों में) के पास भेजेगा (नई कुंजी है)।

इसके अलावा, यदि this अपरिभाषित है, तो यह एक त्रुटि में परिणाम देता है। अगर अभिव्यक्ति झूठी मूल्यांकन नहीं करती है।

अद्यतन: this वस्तु घोषणा के आधार पर सेट नहीं है, लेकिन मंगलाचरण द्वारा। इसका अर्थ यह है कि यदि आप x = o.start जैसे चर के लिए फ़ंक्शन प्रॉपर्टी असाइन करते हैं और x() पर कॉल करें, this प्रारंभ के अंदर अब o को संदर्भित नहीं करता है। यह तब होता है जब आप setTimeout करते हैं। यह काम करने के लिए, के बजाय ऐसा करते हैं:

var o = new Request(...); 
setTimeout(function() { o.start(); }, 1000); 

Answer 2

जावास्क्रिप्ट के OOP एक छोटे से फंकी (या एक बहुत) है और यह कुछ करने के लिए इस्तेमाल हो रही लेता है। यह पहली बात आपको ध्यान में रखने की जरूरत है कि कोई कक्षा नहीं है और कक्षाओं के संदर्भ में सोचने से आप यात्रा कर सकते हैं। और एक कन्स्ट्रक्टर (क्लास परिभाषा के जावास्क्रिप्ट समकक्ष) से ​​जुड़ी एक विधि का उपयोग करने के लिए आपको अपनी ऑब्जेक्ट को तुरंत चालू करने की आवश्यकता है।

Ninja = function (name) { 
    this.name = name; 
}; 
aNinja = new Ninja('foxy'); 
aNinja.name; //-> 'foxy' 

enemyNinja = new Ninja('boggis'); 
enemyNinja.name; //=> 'boggis' 

ध्यान दें कि Ninja उदाहरणों में एक ही गुण होते हैं लेकिन aNinjaenemyNinja के गुणों का उपयोग नहीं कर सकते हैं: उदाहरण के लिए। (इस भाग वास्तव में आसान/सरल होना चाहिए) चीज़ें थोड़ी अलग मिलता है जब आप prototype को सामान जोड़ना प्रारंभ करें: कॉलिंग क्योंकि this केवल सही वस्तु (अपने "वर्ग के लिए अंक यह सीधे एक त्रुटि फेंक होगा

Ninja.prototype.jump = function() { 
    return this.name + ' jumped!'; 
}; 
Ninja.prototype.jump(); //-> Error. 
aNinja.jump(); //-> 'foxy jumped!' 
enemyNinja.jump(); //-> 'boggis jumped!' 

") जब निर्माता instantiated है (अन्यथा यह वैश्विक वस्तु को किसी ब्राउज़र में window)

Answer 3

ES2015 उर्फ ​​ES6 में के लिए अंक, classfunctions के लिए एक वाक्यात्मक चीनी है।

यदि आप this के लिए कोई संदर्भ सेट करने के लिए मजबूर होना चाहते हैं तो आप bind() विधि का उपयोग कर सकते हैं। जैसा कि @chetan ने इंगित किया, आमंत्रण पर आप संदर्भ भी सेट कर सकते हैं!नीचे दिए गए उदाहरण की जाँच करें:

class Form extends React.Component { 
constructor() { 
    super(); 
    } 
    handleChange(e) { 
    switch (e.target.id) { 
     case 'owner': 
     this.setState({owner: e.target.value}); 
     break; 
     default: 
    } 
    } 
    render() { 
    return (
     <form onSubmit={this.handleNewCodeBlock}> 
     <p>Owner:</p> <input onChange={this.handleChange.bind(this)} /> 
     </form> 
    ); 
    } 
} 

यहाँ हम Form करने के लिए handleChange() अंदर संदर्भ मजबूर कर दिया।