एक कॉलबैक

Question

मैं परिभाषित के भीतर से एक जावास्क्रिप्ट वस्तु विधि आह्वान निम्नलिखित MyClass और एक उपयोगकर्ता स्क्रिप्ट में अपने तरीके:

function MyClass() { 
    this.myCallback = function() { 
     alert("MyClass.myCallback()"); 
    }; 

    this.startRequest = function() { 
     GM_xmlhttpRequest({ 
      'method': 'GET', 
      'url': "http://www.google.com/", 
      'onload': function (xhr) { 
       myClassInstance.myCallback(); 
      } 
     }); 
    }; 
} 

var myClassInstance = new MyClass(); 
myClassInstance.startRequest(); 

यह स्क्रिप्ट काम करता है और myCallback() विधि एक बार GM_xmlhttpRequest कम्प्लिट्स कहा जाता हो जाता है।

हालांकि, यह केवल काम करता है क्योंकि onload कॉलबैक वैश्विक चर myClassInstance का जिक्र कर रहा है। अगर मैं करने के लिए onload कॉलबैक अद्यतन:

Uncaught TypeError: Object [object DOMWindow] has no method 'myCallback'.

यह this गलत संदर्भ में मूल्यांकन किया जा रहा है लगता है:

'onload': function (xhr) { 
    this.myCallback(); 
} 

तो मैं (क्रोम) त्रुटि मिलती है।

क्या वैश्विक चर का उपयोग करने के लिए myClassInstance की myCallback() विधि का उपयोग करने का कोई तरीका है?

Answer 1

सही this, जब यह दायरे में है, एक चर में सहेजें। उदाहरण के लिए एक संदर्भ

this.startRequest = function() { 
    var myself = this; 
    GM_xmlhttpRequest({ 
     'method': 'GET', 
     'url': "http://www.google.com/", 
     'onload': function (xhr) { 
      myself.myCallback(); 
     } 
    }); 
}; 

Answer 2

स्टोर और उपयोग यह:: तो फिर आप इसे बाद में संदर्भित कर सकते हैं

function MyClass() { 
    this.myCallback = function() { 
     alert("MyClass.myCallback()"); 
    }; 

    var instance = this; 

    instance.startRequest = function() { 
     GM_xmlhttpRequest({ 
      'method': 'GET', 
      'url': "http://www.google.com/", 
      'onload': function (xhr) { 
       instance.myCallback(); 
      } 
     }); 
    }; 
} 

Answer 3

आसान समाधान, के रूप में पहले ही बताया गया था, this कि रहता है के लिए एक उपनाम पैदा कर रही है दायरे में। उपनाम के लिए सबसे लोकप्रिय चर नाम self या that जैसी चीजें हैं, लेकिन वास्तव में कुछ भी काम करता है।

अन्य वैकल्पिक (कि या बेहतर उपयोग के मामले के आधार पर नहीं हो सकता है हो सकता है,) एक "सादे" समारोह में विधि बंधन और उपयोग कर रहा है कि बजाय:

var f = this.callback.bind(this); 

... 
'onload': function(){ 
    f(); 
} 

बाँध वर्ष पर समर्थित नहीं है ब्राउज़र, लेकिन आप कई जेएस ढांचे में विकल्प पा सकते हैं। मैंने जो उदाहरण दिया है वह अच्छा नहीं दिखता है, लेकिन जब आप कॉलबैक फ़ंक्शन के रूप में अपनी विधि को सीधे पास करना चाहते हैं तो यह बहुत सुविधाजनक हो सकता है (आपको आंशिक फ़ंक्शन एप्लिकेशन भी मिल सकता है और यह बहुत साफ है)