জাভাস্ক্রিপ্টে this একটি গুরুত্বপূর্ণ কিওয়ার্ড যা বর্তমান এক্সিকিউশন কনটেক্সটের উপর ভিত্তি করে ভ্যালু ধারণ করে। সাধারণত এটি একটি ফাংশনের মধ্যে ব্যবহৃত হয় এবং ফাংশনটির সাথে সম্পর্কিত অবজেক্টকে রেফার করে। this কিওয়ার্ডের মান কিভাবে কাজ করে তা নির্ভর করে কোডের কনটেক্সট বা কীভাবে ফাংশনটি কল করা হচ্ছে তার উপর।
this কিওয়ার্ডের ব্যবহার
গ্লোবাল স্কোপে this
যখন this গ্লোবাল স্কোপে ব্যবহৃত হয়, এটি গ্লোবাল অবজেক্টের রেফারেন্স হয়। ব্রাউজারে এটি window অবজেক্টকে নির্দেশ করে এবং Node.js-এ এটি global অবজেক্টকে নির্দেশ করে।
console.log(this); // ব্রাউজারে: window, Node.js-এ: global
ফাংশনের মধ্যে this
সাধারণ ফাংশন কলের ক্ষেত্রে
যখন একটি ফাংশন সাধারণভাবে কল করা হয়, তখন this গ্লোবাল অবজেক্ট (যেমন ব্রাউজারে window) এর রেফারেন্স হয়। তবে strict mode চালু থাকলে this undefined হয়ে যায়।
function showThis() {
console.log(this); // ব্রাউজারে: window, Node.js-এ: global
}
showThis();
strict mode ব্যবহার করলে:
"use strict";
function showThis() {
console.log(this); // undefined
}
showThis();
অবজেক্ট মেথডে this
যখন this কে একটি অবজেক্টের মেথডে ব্যবহার করা হয়, এটি সেই অবজেক্টকেই নির্দেশ করে যার মেথডটি কল হচ্ছে।
let person = {
name: "Alice",
greet: function() {
console.log(this.name); // this এখানে person অবজেক্টকে নির্দেশ করে
}
};
person.greet(); // আউটপুট: Alice
এখানে this person অবজেক্টকে নির্দেশ করছে, কারণ greet মেথডটি person অবজেক্টে কল করা হয়েছে।
কনস্ট্রাক্টর ফাংশনে this
কনস্ট্রাক্টর ফাংশন ব্যবহার করে নতুন অবজেক্ট তৈরি করার সময় this নতুন অবজেক্টের রেফারেন্সকে নির্দেশ করে। কনস্ট্রাক্টর ফাংশন new কিওয়ার্ডের মাধ্যমে কল করা হয়।
function Person(name, age) {
this.name = name;
this.age = age;
}
let person1 = new Person("John", 30);
console.log(person1.name); // আউটপুট: John
console.log(person1.age); // আউটপুট: 30
এখানে this person1 নামক নতুন অবজেক্টকে নির্দেশ করছে, কারণ এটি কনস্ট্রাক্টর ফাংশনে ব্যবহৃত হয়েছে।
ইভেন্ট হ্যান্ডলারে this
ইভেন্ট হ্যান্ডলারে this কিওয়ার্ড সাধারণত ইভেন্টটির লক্ষ্য (target) এলিমেন্টকে নির্দেশ করে।
let button = document.querySelector("button");
button.addEventListener("click", function() {
console.log(this); // this এখানে button এলিমেন্টকে নির্দেশ করে
});
এখানে, this সেই button এলিমেন্টকে নির্দেশ করছে যার উপর ক্লিক ইভেন্টটি ঘটেছে।
arrow ফাংশনে this
arrow function ব্যবহারে this কিওয়ার্ডের আচরণ সাধারণ ফাংশনের থেকে আলাদা। arrow function এর নিজস্ব this থাকে না, এটি তার পাশের কনটেক্সট থেকে this গ্রহণ করে। অর্থাৎ, arrow function এ this সেই কনটেক্সটকে নির্দেশ করে যেখানে ফাংশনটি ডিফাইন করা হয়েছে।
let person = {
name: "Bob",
greet: function() {
setTimeout(() => {
console.log(this.name); // this এখানে person অবজেক্টকে নির্দেশ করে
}, 1000);
}
};
person.greet(); // আউটপুট: Bob
এখানে, arrow function এর কারণে this person অবজেক্টকে নির্দেশ করছে, কারণ this এর মান greet মেথডের কনটেক্সট থেকে নেওয়া হয়েছে।
সারাংশ
this কিওয়ার্ড জাভাস্ক্রিপ্টের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ফাংশনের কনটেক্সট অনুসারে বিভিন্ন অবজেক্ট বা মান নির্দেশ করতে পারে। এর আচরণ ভিন্ন ভিন্ন কনটেক্সটে বিভিন্নভাবে পরিবর্তিত হয়, যেমন গ্লোবাল স্কোপ, ফাংশন কল, অবজেক্ট মেথড, কনস্ট্রাক্টর ফাংশন এবং arrow function-এর মধ্যে। this কিওয়ার্ডের সঠিক ব্যবহার কোডের কার্যকারিতা এবং নির্ভুলতা নিশ্চিত করতে গুরুত্বপূর্ণ।
Read more
