जावास्क्रिप्ट एसिंक्रोनस फ़ंक्शंस और यह कीवर्ड

कक्षाओं में अतुल्यकालिक कार्यों का उपयोग करते समय, एक समस्या अक्सर उत्पन्न होती है जब फ़ंक्शन बॉडी में फ़ंक्शन को कॉल करने वाली क्लास ऑब्जेक्ट तक पहुंचना असंभव है। यह स्पष्ट रूप से अजाक्स उदाहरण में देखा जाता है (jQuery का उपयोग करके):

function Loader() { this.load = function() { $.ajax({ url: '/test.php', success: function(data, textStatus, jqXHR) { //         console.log(this); // this    jQuery, //   success } }); } } (new Loader()).load(); 

इस समस्या को हल करने के लिए, जावास्क्रिप्ट में एक लागू फ़ंक्शन है जो आपको हमारी वस्तु के संदर्भ में किसी भी फ़ंक्शन को कॉल करने की अनुमति देता है - i.e. यह वही होगा जो हम कहते हैं। यह केवल कॉलबैक फ़ंक्शन करने के लिए बना हुआ है, जो एक अतुल्यकालिक फ़ंक्शन उत्पन्न करेगा:

 function cb(object, fnc) { return function() { return fnc.apply(object, arguments); } } 

ऑब्जेक्ट - इस में प्रतिस्थापित की जाने वाली वस्तु
fnc - निष्पादन योग्य कार्य
तर्कों - समारोह तर्कों की मानक वस्तु

अब परिणाम इस तरह होगा:

 function Loader() { this.load = function() { $.ajax({ url: '/test.php', success: cb(this, this.onLoad) }) } this.onLoad = function(data, textStatus, jqXHR) { console.log(this); // this     Loader } } (new Loader()).load(); 

किसी फ़ंक्शन के फ़ंक्शन को फ़ंक्शन के रूप में स्थानांतरित करना आवश्यक नहीं है, आप मक्खी पर एक फ़ंक्शन बना सकते हैं:

 cb(this, function(data, textStatus, jqXHR) { console.log(this); }); 

मूल इस वस्तु को सहेजना

पिछले उदाहरण में, हमने उस ऑब्जेक्ट को खो दिया जिसे सफलता फ़ंक्शन (आंतरिक jQuery ऑब्जेक्ट) कहा जाता है, लेकिन अक्सर कॉलिंग ऑब्जेक्ट का उपयोग करने की आवश्यकता होती है। उदाहरण के लिए, HTML तत्व घटनाओं में:

 function Button() { this.render = function() { var submit = $('<button>').html('click me'); submit.bind('click', function(event) { //  this  HTML-,   console.log(this); }); submit.appendTo($('body')); } } (new Button()).render(); 

इस उदाहरण में, बटन एचटीएमएल तत्व का क्लिक इवेंट उठाया जाता है। कॉलिंग फ़ंक्शन के ऑब्जेक्ट को बचाने के लिए (इस मामले में, बटन का HTML तत्व), कॉलबैक फ़ंक्शन निम्न प्रकार लेगा:

 function cb(object, fnc) { return function() { var args = [this]; for (var i in arguments) args.push(arguments[i]); return fnc.apply(object, args); } } 

इस प्रकार, कॉलर को फ़ंक्शन के पहले तर्क के रूप में पास किया जाता है, और शेष तर्कों को उसी क्रम में पारित किया जाता है। परिणाम इस प्रकार होगा:

 function Button() { this.render = function() { var submit = $('<button>').html('click me'); submit.bind('click', cb(this, this.onClick)); submit.appendTo($('body')); } this.onClick = function(target, event) { console.log(this); // this     Button console.log(target); // HTML-,   } } (new Button()).render();