জাভাস্ক্রিপ্টে this-এর সুবিধা

আগে যা বলা হয়েছে তা থেকে this-এর বিশেষ সুবিধাটি এখনও স্পষ্ট নয়।毕竟，在回调函数内部，我们的元素是可用的 - 因为变量 elem আমাদের func ফাংশনের জন্য গ্লোবাল ভেরিয়েবল হবে:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// এখানে আমাদের এলিমেন্ট সহ elem ভেরিয়েবলটি অ্যাক্সেসযোগ্য
}

এবং, এটা অনুমান করা কঠিন নয় যে this-এর বিষয়বস্তু এবং elem ভেরিয়েবলের বিষয়বস্তু আমাদের ক্ষেত্রে সমান:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // true আউটপুট করবে
}

তাহলে this-এর বিশেষ সুবিধা কী? এটি তখনই প্রকাশ পায় যখন আমাদের কাছে একাধিক এলিমেন্ট থাকে, এবং প্রতিটিতে একই ফাংশন বাঁধা থাকে।

একটি উদাহরণ দেখি। আমাদের কাছে 3টি বাটন আছে:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

ভেরিয়েবলে তাদের রেফারেন্স পাই:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

এই বাটনগুলিতে একই ফাংশন বাঁধি:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

এবং ফাংশনের ভিতরে this.value আউটপুট করব:

function func() {
	console.log(this.value);
}

এর ফলে আমাদের তিনটি বাটন আছে। যেকোনো বাটনে ক্লিক করলে func ফাংশনটি কল হবে। এক্ষেত্রে প্রতিটি ক্লিকে this-এ সেই বাটনের রেফারেন্স থাকবে যেখানে ইভেন্টটি ঘটেছে।

অর্থাৎ, প্রতিটি ক্লিক কনসোলে value আউটপুট করবে সেই বাটনটির, যেখানে ক্লিক হয়েছে, কিন্তু এটি করবে একই ফাংশন func! this ব্যবহার করার সুবিধা এখানেই।

5টি প্যারাগ্রাফ দেওয়া আছে যাতে কিছু লেখা আছে। যেকোনো প্যারাগ্রাফে ক্লিক করলে এর লেখার শেষে একটি বিস্ময়বোধক চিহ্ন যোগ করুন।

3টি ইনপুট ফিল্ড দেওয়া আছে, যাতে কিছু সংখ্যা লেখা আছে। যেকোনো ইনপুট ফিল্ডে ফোকাস হারানোর সময় সেখানে থাকা সংখ্যাটির বর্গ করুন।