জাভাস্ক্রিপ্টে কনটেক্সট হারানো

ধরুন আমাদের একটি ফাংশনের ভিতরে আরেকটি ফাংশন আছে। বাইরের ফাংশনটিকে parent এবং ভিতরের ফাংশনটিকে child নাম দিই:

function parent() {
	function child() {
		
	}
}

আগের পাঠগুলি থেকে আপনি জানেন যে বাইরের ফাংশনে কোনো ভেরিয়েবল সংজ্ঞায়িত করলে তা ভিতরের ফাংশনে অ্যাক্সেস করা যাবে:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // আউটপুট হবে 'abcde'
	}
	child(); // ভিতরের ফাংশন কল করছি
}

parent(); // বাইরের ফাংশন কল করছি

যাইহোক, একটি সূক্ষ্মতা আছে: ভিতরের ফাংশনের বাইরের ফাংশনের সমস্ত ভেরিয়েবলে অ্যাক্সেস আছে, কিন্তু this-এ অ্যাক্সেস নেই। অর্থাৎ: যদি বাইরের ফাংশনটি কোনো DOM এলিমেন্টের সাথে বাঁধা থাকে, তাহলে সেই ফাংশনে this সেই এলিমেন্টটিকে নির্দেশ করবে, কিন্তু ভিতরের ফাংশনের this করবে না!

তাহলে ভিতরের ফাংশনে this কী নির্দেশ করবে? উত্তর: এটি undefined-এর সমান হবে (স্ট্রিক্ট মোডে), কারণ ফাংশনটি কোনো কিছুর সাথে বাঁধা নেই।

আসুন ব্যবহারিকভাবে পরীক্ষা করি। ধরুন আমাদের একটি ইনপুট দেওয়া আছে:

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

এই ইনপুটটিতে parent ফাংশনটি বাঁধি, যেটি ইনপুট দ্বারা ফোকাস হারানোর উপর কল হবে:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// ফোকাস হারানোর উপর কল হবে:
function parent() {
	// এখানে কিছু কোড থাকবে
	
	function child() {
		// এখানে কিছু কোড থাকবে
	}
	child(); // চাইল্ড ফাংশন কল করছি
}

আসুন this-এর বিষয়বস্তু কনসোলে দুটি জায়গায় আউটপুট করি: parent ফাংশনের ভিতরে এবং child ফাংশনের ভিতরে:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this); // আমাদের ইনপুটের রেফারেন্স আউটপুট করবে
	
	function child() {
		console.log(this); // undefined আউটপুট করবে
	}
	child();
}

এই কোডটি রান করুন, ইনপুটের ফোকাস হারান এবং কনসোল দেখুন - আপনি দেখতে পাবেন যে প্রথম console.log কনসোলে আমাদের ইনপুটের রেফারেন্স আউটপুট করবে, এবং দ্বিতীয়টি - শুধু undefined। এই ধরনের পরিস্থিতি, যখন this অপ্রত্যাশিতভাবে আমাদের প্রয়োজনীয় জিনিসটিকে নির্দেশ করে না, তাকে কনটেক্সট হারানো বলা হয়।

ধরুন এখন উভয় ফাংশনে আমরা ইনপুটের value আউটপুট করব। নির্ধারণ করুন, কমেন্ট দ্বারা চিহ্নিত কোডের লাইনে কী আউটপুট হবে:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this.value); // কী আউটপুট করবে?
	
	function child() {
		console.log(this.value); // কী আউটপুট করবে?
	}
	child();
}