कैसे एक जावास्क्रिप्ट वस्तु

Question

मैं सिर्फ कैसे सबसे अच्छा मेरी जावास्क्रिप्ट कोड को व्यवस्थित करने के बारे में सीख रहा हूँ के अंदर एक विधि कॉल करने, और मैं कोड के इस छोटे से टुकड़े मैंने लिखा के बारे में एक सवाल था:

var reportsControllerIndex = { 
    plotMapPoints: function(data) { 
     //plots points 
    }, 

    drawMap: function() { 
     $.getJSON('/reports.json', function(data) { 
      reportsControllerIndex.plotMapPoints(data);   
     }); 
    }, 

    run: function() { 
     reportsControllerIndex.drawMap(); 
    } 
}; 

सवाल यह है कि रिपोर्ट नियंत्रक इंडेक्स ऑब्जेक्ट के भीतर से नियंत्रक इंडेक्स के किसी अन्य फ़ंक्शन को कॉल करने के संबंध में। मैंने पहले रन फ़ंक्शन के लिए निम्नलिखित कोड का प्रयास किया था:

run: function() { 
    this.drawMap(); 
} 

जो पूरी तरह से काम करता था। हालांकि, मैं तो जल्दी से इस drawMap समारोह के लिए कर पाया:

drawMap: function() { 
    $.getJSON('/reports.json', function(data) { 
     this.plotMapPoints(data);   
    }); 
} 

, काम नहीं करता है के बाद से "इस" अब getJSON कॉल की कॉलबैक फ़ंक्शन को उल्लेख करता है।

मेरा समाधान केवल उन सभी विधियों के सामने रिपोर्ट नियंत्रक इंडेक्स रखना था, लेकिन मैं उत्सुक था: इस तरह की समग्र वस्तु के भीतर फ़ंक्शंस कॉल करने का एक और सापेक्ष तरीका है (जैसा कि आप करेंगे एक मानक ओओ भाषा में एक कक्षा के साथ)? या क्या मैं इसे करने के लिए मजबूर हूं क्योंकि मैं वर्तमान में ऑब्जेक्ट के नाम से विधियों को बुला रहा हूं?

Answer 1

आप this स्टोर करने के लिए एक चर में बाध्यकारी चाहते हैं।

drawMap: function() { 
    var _this = this; 
    $.getJSON('/reports.json', function(data) { 
     _this.plotMapPoints(data);   
    }); 
} 

Answer 2

आप getJSON समारोह के बाहर this करने के लिए एक चर संदर्भ का उपयोग करने की जरूरत है। getJSON jquery के भीतर कॉलबैक का संदर्भ सेट करता है।

इस तरह :

var self = this; 
$.getJSON('/reports.json', function(data) { 
    self.plotMapPoints(data);   
}); 

Answer 3

देर जवाब है, लेकिन jQuery एक विधि called jQuery.proxy() कि इस उद्देश्य के लिए किया जाता है है। आप इसे this के मान के साथ फ़ंक्शन पास करते हैं, जिसे आप बनाए रखना चाहते हैं, और यह एक फ़ंक्शन लौटाएगा जो this सुनिश्चित करता है।

इस तरह आपको एक चर परिभाषित करने की आवश्यकता नहीं है।

drawMap: function() { 
    $.getJSON('/reports.json', $.proxy(function(data) { 
     this.plotMapPoints(data);   
    }, this)); 
} 

Answer 4

plotMapPoints: function(data) { 
    //plots points 
}.bind(this) 

जब अपने कार्य को परिभाषित तुम सिर्फ .bind जोड़ सकते हैं (यह) कि समारोह के लिए सही संदर्भ निर्धारित करने के।

var reportsControllerIndex = new function() { 

    var self = this; 

    self.plotMapPoints = function (data) { 
     //plots points 
    }, 

    self.drawMap = function() { 
     $.getJSON('/reports.json', function (data) { 
      self.plotMapPoints(data);   
     }); 
    }, 

    self.run = function() { 
     self.drawMap(); 
    } 
}; 

इस वर्ग के रूप में एक ही इच्छा तुमने किया था के रूप में काम करता है, और आप अभी भी द्वारा वर्ग विधि कॉल कर सकते हैं::

Answer 5

आप इसे लिख सकते हैं यह पसंद है इस प्रतिमान में

reportsControllerIndex.run() 

, मैं परिभाषित self कक्षा को इंगित करता है, ताकि आप कक्षा में जहां भी चाहें self पर कॉल कर सकें।

---

आगे, इस प्रतिमान समारोह में this समस्या यह है कि यदि आप किसी अन्य funciton को कॉलबैक के रूप में लाने का समाधान कर सकते हैं: इस संदर्भ का एक बहुत बनाता है

plotMapPoints: function(data) { 
    console.log(this); 
    // Need a this referring to the class itself 
    // It's inconvenient to bring this as parameter 
},