JavaScript-এ bind মেথডের মাধ্যমে কনটেক্সট বাইন্ডিং

পরবর্তী মেথড bind একটি ফাংশনে কনটেক্সট স্থায়ীভাবে বাইন্ড করতে দেয়। এই মেথডটি তার ফলাফল হিসেবে একটি নতুন ফাংশন রিটার্ন করে, যার ভিতরে this একটি কঠোরভাবে নির্ধারিত মান ধারণ করবে।

আসুন একটি উদাহরণ দেখি।

ধরুন আমাদের একটি ইনপুট আছে:

html<input id="elem" value="text">

ধরুন এই ইনপুটের রেফারেন্স elem ভেরিয়েবলে সেভ করা আছে:

javascriptlet elem = document.querySelector('#elem');

ধরুন আমাদের নিম্নলিখিত ফাংশন funcও আছে:

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

আসুন bind ব্যবহার করে একটি নতুন ফাংশন তৈরি করি, যা func ফাংশনের কপি হবে, কিন্তু এর this সর্বদা elem এর সমান হবে:

javascriptlet newFunc = func.bind(elem);

এখন newFunc ভেরিয়েবলে একটি ফাংশন রয়েছে। আসুন এটিকে কল করি, প্রথম প্যারামিটার হিসেবে '1' এবং দ্বিতীয়টি হিসেবে '2' পাস করে (আমি মনে করিয়ে দিই যে elem এ value সহ একটি ইনপুট রয়েছে, যার মান 'text'):

javascriptnewFunc('1', '2');

আসুন সব একত্রিত করি:

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // আউটপুট দেবে 'text12'

bind এর কাজের ফলাফল একটি নতুন ফাংশন newFunc-এ সেভ করা বাধ্যতামূলক নয়, কেবল func কে ওভাররাইট করা যেতে পারে। এর পরে func আগের মতোই একই ফাংশন হবে, কিন্তু কঠোরভাবে বাঁধা this সহ:

javascriptfunc = func.bind(elem);

html<input id="elem" value="hello">

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// এখানে bind() দিয়ে কনস্ট্রাকশন লিখুন

func('John', 'Smit'); // এখানে আউটপুট দেবে 'hello, John Smit'
func('Eric', 'Luis'); // এখানে আউটপুট দেবে 'hello, Eric Luis'