😰 👉🏻 👡 जावास्क्रिप्ट और कार्यों के आंशिक अनुप्रयोग के लिए बाध्यकारी संदर्भ (यह) 👲🏼 🧝🏾 🍷

पिछली पोस्ट में, मैंने वर्णन किया कि जावास्क्रिप्ट में यह किसी वस्तु के लिए बाध्य नहीं है, लेकिन कॉल के संदर्भ पर निर्भर करता है। व्यवहार में, इसके लिए अक्सर आवश्यकता होती है कि किसी फ़ंक्शन के अंदर किसी विशिष्ट ऑब्जेक्ट को हमेशा देखें।
इस लेख में, हम इस समस्या को हल करने के दो दृष्टिकोणों पर विचार करेंगे।
1. jQuery.proxy - लोकप्रिय jQuery पुस्तकालय का उपयोग कर एक दृष्टिकोण
2. Function.prototyp.bind - जावास्क्रिप्ट 1.8.5 में जोड़ा गया एक दृष्टिकोण। आइए हम इसके आवेदन पर करीने के लिए भी विचार करें (एक फ़ंक्शन का आंशिक अनुप्रयोग) और कुछ सूक्ष्मताएँ जो इकाइयों के बारे में जानती हैं।

परिचय

गुण x और पद्धति f युक्त एक साधारण वस्तु पर विचार करें, जो कंसोल को मान .x प्रदर्शित करता है

var object = { x: 3, f: function() { console.log(this.x); } }

जैसा कि मैंने पिछले पोस्ट में बताया था, जब ऑब्जेक्ट .f () को कॉल किया जाता है , तो कंसोल नंबर 3 को प्रदर्शित करेगा। अब मान लीजिए कि हमें 1 सेकंड में इस नंबर को प्रिंट करने की आवश्यकता है।

 setTimeout(object.f, 1000); //  undefined //    —    : setTimeout(function() { object.f(); }, 1000); //  3

प्रत्येक बार रैपर फ़ंक्शन का उपयोग करना असुविधाजनक है। हमें फ़ंक्शन के संदर्भ को बांधने का एक तरीका चाहिए, ताकि यह फ़ंक्शन ऑब्जेक्ट के अंदर हो। हमेशा ऑब्जेक्ट को संदर्भित करता है

1. jQuery.proxy

 jQuery.proxy(function, context); jQuery.proxy(context, name);

यह कोई रहस्य नहीं है कि jQuery एक बहुत लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है, इसलिए पहले हम किसी फ़ंक्शन के संदर्भ में बाइंड करने के लिए jQuery.proxy का उपयोग करते हैं।
jQuery.proxy एक नया फ़ंक्शन देता है, जिसे कॉल करने पर, मूल फ़ंक्शन फ़ंक्शन को संदर्भ संदर्भ में कॉल करता है । JQuery.proxy का उपयोग करके, उपरोक्त समस्या को इस तरह हल किया जा सकता है:

 setTimeout($.proxy(object.f, object), 1000); //  3

यदि हमें एक ही कॉलबैक को कई बार निर्दिष्ट करने की आवश्यकता है, तो दोहराव के बजाय

 setTimeout($.proxy(object.f, object), 1000); setTimeout($.proxy(object.f, object), 2000); setTimeout($.proxy(object.f, object), 3000);

$ .proxy के परिणाम को एक अलग चर में रखना बेहतर है

 var fn = $.proxy(object.f, object); setTimeout(fn, 1000); setTimeout(fn, 2000); setTimeout(fn, 3000);

आइए अब हम इस तथ्य पर ध्यान दें कि हम $ .proxy के अंदर दो बार निर्दिष्ट ऑब्जेक्ट (पहली बार ऑब्जेक्ट की विधि ऑब्जेक्ट है। यदि , दूसरी है तो प्रेषित संदर्भ ऑब्जेक्ट है )। शायद नकल से बचने का अवसर है? जवाब है हां। ऐसे मामलों के लिए, पासिंग पैरामीटर के लिए एक वैकल्पिक विकल्प $ .proxy में जोड़ा गया है - पहला पैरामीटर एक ऑब्जेक्ट होना चाहिए, और दूसरा इसकी विधि का नाम है। एक उदाहरण:

 var fn = $.proxy(object, "f"); setTimeout(fn, 1000);

ध्यान दें कि विधि नाम एक स्ट्रिंग के रूप में पारित किया गया है।

2. फंक्शन.प्रोटाइप.बिंद

 func.bind(context[, arg1[, arg2[, ...]]])

चलिए Function.prototyp.bind पर चलते हैं। इस विधि को जावास्क्रिप्ट 1.8.5 में जोड़ा गया था।

ब्राउज़र संगतता

फ़ायरफ़ॉक्स (गेको): 4.0 (2)
क्रोम: 7
इंटरनेट एक्सप्लोरर: 9
ओपेरा: 11.60
सफारी: 5.1.4

एमुजिला डेवलपर नेटवर्क से एमुलेशन फंक्शन.प्रोटाइप.बिंद

 Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; };

Function.prototyp.bind के 2 उद्देश्य हैं - फ़ंक्शन के संदर्भ का स्थिर बंधन और फ़ंक्शन का आंशिक अनुप्रयोग।
संक्षेप में, बाँध एक नया फ़ंक्शन बनाता है जो संदर्भ के संदर्भ में फ़ंक कहता है। यदि तर्क arg1, arg2 ... निर्दिष्ट किए जाते हैं, तो उन्हें नए फ़ंक्शन में प्रत्येक कॉल में जोड़ा जाएगा, और वे उन लोगों का सामना करेंगे जो नए फ़ंक्शन को कॉल किए जाने पर निर्दिष्ट होते हैं।

2.1। प्रसंग बंधन

बाइंड टू बिंड का संदर्भ बहुत सरल है, बस एक उदाहरण पर विचार करें:

 function f() { console.log(this.x); } var bound = f.bind({x: 3}); // bound -   - "",   this    {x:3} bound();//  3

इस प्रकार, परिचय से उदाहरण इस प्रकार लिखा जा सकता है:

 var object = { x: 3, f: function() { console.log(this.x); } } setTimeout(object.f.bind(object), 1000); //  3

2.2। कार्यों का आंशिक उपयोग

सरल बनाने के लिए, आइए कार्यों के आंशिक अनुप्रयोग के लिए बाइंड का उपयोग करने के उदाहरण पर एक नज़र डालें।

 function f(x, y, z) { console.log(x + y + z); } var bound = f.bind(null, 3, 5); //     -    ,     this   f,      -      null bound(7); //  15 (3 + 5 + 7) bound(17); //  25 (3 + 5 + 17)

जैसा कि आप उदाहरण से देख सकते हैं - कार्यों के आंशिक अनुप्रयोग का सार सरल है - कम संख्या में तर्कों के साथ एक नया फ़ंक्शन बनाना, बाइंड फ़ंक्शन का उपयोग करके पहले तर्कों को "ठीक करना"।
यह लेख को समाप्त कर सकता है, लेकिन ... बाइंड पद्धति का उपयोग करके प्राप्त किए गए कार्य व्यवहार में कुछ विशेषताएं हैं

2.3। बाइंड फीचर्स

पिछले लेख की टिप्पणियों में, बाइंड ( एक , दो ) के संबंध में 2 उदाहरण दिए गए थे।
मैंने इन उदाहरणों का मिश्रण बनाने का फैसला किया, साथ ही साथ स्ट्रिंग मानों को बदल दिया, ताकि उनके साथ व्यवहार करना आसान हो।
उदाहरण (उत्तरों का अनुमान लगाने की कोशिश करें)

 function ClassA() { console.log(this.x, arguments) } ClassA.prototype.x = "fromProtoA"; var ClassB = ClassA.bind({x : "fromBind"}, "bindArg"); ClassB.prototype = {x : "fromProtoB" }; new ClassA("callArg"); new ClassB("callArg"); ClassB("callArg"); ClassB.call({x: "fromCall"}, 'callArg');

उत्तर

ProProtoA से ["callArg"]
fromProtoA ["bindArg", "callArg"]
बिंद से ["bindArg", "callArg"]
बिंद से ["bindArg", "callArg"]

डिस्सैम्बलिंग से पहले - मैं मानक के अनुसार बाइंड की मुख्य विशेषताओं को सूचीबद्ध करूंगा।

2.3.1। आंतरिक गुण

Function.prototype.bind द्वारा बनाई गई फ़ंक्शन ऑब्जेक्ट्स में प्रोटोटाइप गुण या आंतरिक गुण [[कोड]], [[FormalParameters]] और [[स्कोप]] नहीं है।

यह सीमा मैन्युअल रूप से परिभाषित विधियों (उदाहरण के लिए, एमडीएन से एक संस्करण ) से बाइंड के कार्यान्वयन में अंतर करती है।

2.3.2। कॉल करें और आवेदन करें

कॉल और लागू तरीकों का व्यवहार मानक व्यवहार से भिन्न होता है, अर्थात्:

 boundFn.[[Call]] = function (thisValue, extraArgs): var boundArgs = boundFn.[[BoundArgs]], boundThis = boundFn.[[BoundThis]], targetFn = boundFn.[[TargetFunction]], args = boundArgs.concat(extraArgs); return targetFn.[[Call]](boundThis, args);

कोड से पता चलता है कि इस Value का उपयोग कहीं भी नहीं किया गया है। इस प्रकार, फ़ंक्शन का उपयोग करके प्राप्त फ़ंक्शन के लिए कॉल संदर्भ बदल रहा है। कॉल और एप्लिकेशन का उपयोग करके फ़ंक्शन को लागू करना संभव नहीं है!

2.3.3। कंस्ट्रक्टर में

कंस्ट्रक्टर में, यह एक नई (निर्मित) वस्तु को संदर्भित करता है। दूसरे शब्दों में, बाइंड के साथ निर्दिष्ट संदर्भ को केवल अनदेखा किया जाता है। निर्माता मूल फ़ंक्शन के नियमित [[कॉल]] को कॉल करता है ।
महत्वपूर्ण! यदि कंस्ट्रक्टर में यह रिटर्न नहीं है, तो रिटर्न वैल्यू आम तौर पर अपरिभाषित है और नए फ़ंक्शन के रिटर्न वैल्यू पर निर्भर करता है!

एक उदाहरण पार्स करना

 function ClassA() { console.log(this.x, arguments) } ClassA.prototype.x = "fromProtoA"; var ClassB = ClassA.bind({x : "fromBind"}, "bindArg"); //   2.3.1,         built-in  Function.prototype.bind //     bind (,   MDN)     ClassB.prototype = {x : "fromProtoB" }; //    -  bind     // : fromProtoA ["callArg"] new ClassA("callArg"); //   2.3.3 - this    .   bind    bindArg,         // : fromProtoA ["bindArg", "callArg"] //    bind   : fromBind ["bindArg", "callArg"]. new ClassB("callArg"); //   bind ,      {x : "fromBind"},   bindArg (  bind),  - "callArg" // : fromBind ["bindArg", "callArg"] ClassB("callArg"); //   2.3.2. ,     call  ,    bind   . // : fromBind ["bindArg", "callArg"] ClassB.call({x: "fromCall"}, 'callArg');

निष्कर्ष

इस पोस्ट में, मैंने फ़ंक्शन के संदर्भ को जोड़ने के बुनियादी तरीकों का वर्णन करने की कोशिश की, और फंक्शन.प्रोटाइप.इंड के काम में कुछ विशेषताओं का भी वर्णन किया, जबकि मैंने केवल महत्वपूर्ण विवरण (मेरे दृष्टिकोण से) को छोड़ने की कोशिश की।
यदि आप त्रुटियों / अशुद्धियों को नोटिस करते हैं या कुछ स्पष्ट करना / जोड़ना चाहते हैं - तो पीएम को लिखें, सही

जावास्क्रिप्ट और कार्यों के आंशिक अनुप्रयोग के लिए बाध्यकारी संदर्भ (यह)