জাভাস্ক্রিপ্টে প্রসঙ্গ (কনটেক্সট) নিয়ে কাজ করার মৌলিক বিষয়াদি

ধরুন আমাদের কাছে একটি ফাংশন func আছে, যার ভিতরে this ব্যবহার করা হয়েছে:

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

এই ফাংশনে this কী নির্দেশ করছে? আমরা জানি না। এবং জাভাস্ক্রিপ্টও জানে না। এবং ফাংশনটি নিজেও জানে না। অর্থাৎ, ফাংশন তৈরির মুহূর্তে this ঠিক কী নির্দেশ করবে, তা নির্ধারিত হয় না। এবং এটি তখনই নির্ধারিত হবে যখন এই ফাংশনটি কল করা হবে।

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

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

আমাদের এই ইনপুট ফিল্ডে func ফাংশনটি এমনভাবে সংযুক্ত করি যাতে ইনপুট ফিল্ডটি当其 ফোকাস হারালে ফাংশনটি কার্যকর হয়। এখন ফাংশনটি কার্যকর হওয়ার মুহূর্তে this আমাদের ইনপুট ফিল্ডটিকে নির্দেশ করবে:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // ফোকাস হারানোতে 'text' আউটপুট করবে
}

কিন্তু আমাদের কাছে একটি ইনপুট না হয়ে একাধিক ইনপুটও তো থাকতে পারে:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

এবং আমরা এই প্রতিটি ইনপুট ফিল্ডেই আমাদের func ফাংশনটি সংযুক্ত করতে পারি। এই ক্ষেত্রে, প্রথম উপাদানের জন্য ফাংশন কলের মুহূর্তে this সেটিকে নির্দেশ করবে, এবং দ্বিতীয়টির জন্য - সেটিকে নির্দেশ করবে।

অনুশীলনে এর অর্থ হল, ফাংশনের ভিতরের this কোন ইনপুট ফিল্ডে আমরা ফোকাস হারিয়েছি তার উপর নির্ভর করে:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // 'text1' অথবা 'text2' আউটপুট করবে
}

মোটের উপর, this-এর এই বৈশিষ্ট্যটি খুবই সুবিধাজনক - আমরা মাত্র একটি ফাংশন তৈরি করি এবং যেকোনো সংখ্যক ইনপুট ফিল্ডে এটি সংযুক্ত করি। যদি this সেই উপাদানটিকে নির্দেশ না করত যেখানে ইভেন্টটি ঘটেছে, তাহলে আমাদের এটি সম্ভব হত না - আমাদের প্রতিটি ইনপুট ফিল্ডের জন্য একই কোড সহ নিজস্ব একটি করে ফাংশন তৈরি করতে হত!