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

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

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

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

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

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

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

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

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

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

let newFunc = func.bind(elem);

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

newFunc('1', '2');

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

let 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 সহ:

func = func.bind(elem);

ধরুন নিম্নলিখিত কোড দেওয়া আছে:

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

let 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'

নির্দিষ্ট স্থানে bind মেথড দিয়ে এমন একটি কনস্ট্রাকশন লিখুন যাতে func ফাংশনের ভিতরের this সর্বদা elem ভেরিয়েবল থেকে ইনপুটটিকে ইঙ্গিত করে।