বাইন্ড একটি নতুন ফাংশন তৈরি করে যা ফাংশনটির 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()প্রায়শই ব্যবহার করার প্রয়োজন নাও হতে পারে । উদাহরণস্বরূপ, যদি আপনি কোনও ডিওএম ইভেন্টের কলব্যাকটি 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)