बाइंड एक नया फंक्शन बनाता है जो फंक्शन के thisअंदर को पैरामीटर पास होने के लिए मजबूर करेगा bind()।
यहां एक उदाहरण दिया गया है, जिसमें दिखाया bindगया है कि सही तरीके से पास सदस्य विधि पास करने के लिए कैसे उपयोग किया जाए this:
var myButton = {
content: 'OK',
click() {
console.log(this.content + ' clicked');
}
};
myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton
जो प्रिंट करता है:
OK clicked
undefined clicked
OK clicked
आप 1 ( this) पैरामीटर के बाद अतिरिक्त पैरामीटर भी जोड़ सकते हैं और bindउन मानों को मूल फ़ंक्शन में पास करेंगे। किसी भी अतिरिक्त पैरामीटर जो आप बाद में बाउंड फ़ंक्शन को पास करते हैं, उन्हें बाउंड मापदंडों के बाद पास किया जाएगा:
// Example showing binding some parameters
var sum = function(a, b) {
return a + b;
};
var add5 = sum.bind(null, 5);
console.log(add5(10));
जो प्रिंट करता है:
15
की जाँच करें जावास्क्रिप्ट समारोह बाँध अधिक जानकारी और इंटरैक्टिव उदाहरण के लिए।
अद्यतन: ECMAScript 2015 =>कार्यों के लिए समर्थन जोड़ता है । =>फ़ंक्शन अधिक कॉम्पैक्ट हैं और thisपॉइंटर को उनके परिभाषित दायरे से नहीं बदलते हैं , इसलिए आपको bind()अक्सर उपयोग करने की आवश्यकता नहीं हो सकती है । उदाहरण के लिए, यदि आप किसी कॉलबैक को DOM ईवेंट के Buttonलिए हुक करने के लिए पहले उदाहरण से एक फ़ंक्शन चाहते थे click, तो निम्न सभी करने के वैध तरीके हैं:
var myButton = {
... // As above
hookEvent(element) {
// Use bind() to ensure 'this' is the 'this' inside click()
element.addEventListener('click', this.click.bind(this));
}
};
या:
var myButton = {
... // As above
hookEvent(element) {
// Use a new variable for 'this' since 'this' inside the function
// will not be the 'this' inside hookEvent()
var me = this;
element.addEventListener('click', function() { me.click() });
}
};
या:
var myButton = {
... // As above
hookEvent(element) {
// => functions do not change 'this', so you can use it directly
element.addEventListener('click', () => this.click());
}
};
select = document.querySelector.bind(document)