জাভাস্কিপ্ট this কিওয়ার্ড - this keyword in JavaScript

জাভাস্কিপ্ট এ this একটি রিজার্ভড কীওয়ার্ড। অর্থাৎ আমরা এই নামে কোনো ভ্যারিয়েবল এর নামকরণ করতে পারবো না। জাভাস্ক্রিপ্টে this এর আচরণ একেক জায়গায় একেক রকম। এর ভ্যালু কি হবে তা নির্ভর করে মুলত কোন জায়গা থেকে এটিকে কল করা হয়েছে, তার উপর। কোথায় কোথায় this এর ভ্যালু কেমন হতে পারে, চলেন এক দৃষ্টিতে দেখে নেয়া যাক।

গ্লোবালিঃ গ্লোবাল কন্টেক্সটে this এর ভ্যালু সবসময় গ্লোবালই হবে। অর্থাৎ ফাংশন বা অব্জেক্টের বাইরে ব্রাউজারের ক্ষেত্রে সেটি উইন্ডো অব্জেক্টকে এবং নোড এর ক্ষেত্রে সেটি গ্লোবাল অব্জেক্টকে রিপ্রেজেন্ট করবে।

অব্জেক্টের ভিতরেঃ অব্জেক্ট এর কোনো মেথডের ভিতর this কিওয়ার্ড ইউজ করলে তা ওই অব্জেক্টকেই রেফার করে।

উদাহরণ-২ঃ

const nameObj = {
     name: “Fatin Ishraq”,
     printName: function() {
         console.log(this);
     }
};
nameObj.printName();

সাধারণত this কিওয়ার্ড তার প্যারেন্ট অব্জেক্টকে রেফার করে। আরেকটি উদাহরণের মাধ্যমে বিষয়টি আরেকটু ভালো করে বোঝার চেস্টা করি। একটি অব্জেক্ট নেই। তার ভিতর একটি name প্রোপার্টি ও anotherObj নামে একটি চাইল্ড অব্জেক্ট নেই। anotherObj এ একটি name প্রোপার্টি ও printName নামে একটি মেথড নেই। এবং উক্ত মেথড থেকে this.name প্রিন্ট করি।

উদাহরণ-২ঃ

const nameObj = {
     name: “Fatin Ishraq”,
     anotherObj: {
	name: “Ishraq Fatin”,
	printName : function() {
    console.log(this.name);
}
     }
};
nameObj.anotherObj.printName();

উপরের কোডটিকে রান করলে কোন name প্রিন্ট করবে? this কিওয়ার্ড তার এক্সাক্ট প্যারেন্ট অব্জেক্টকে রেফার করে। অর্থাৎ this এর কন্টেক্সট হচ্ছে anotherObj। তাই এটি anotherObj এর name কেই প্রিন্ট করবে।

আমরা জানি this কিওয়ার্ড ডায়নামিক্যালী কাজ করে। অর্থাৎ this কাকে রেফার করবে তা নির্ভর করে মুলত this কে কিভাবে কল করা হয়েছে তার উপর। “উধাহরণ-২” এ স্বাভাবিকভাবে কল করায় এটি anotherObj কে রেফার করেছে। কিন্তু জাভাস্ক্রিপ্ট এ ৩ টি মেথড (call, bind, apply) আছে যেগুলো ব্যবহার করলে, this কাকে রেফার করবে তা বলে দেয়া যায়। অর্থাৎ this এর কন্টেক্সট চেঞ্জ করে দেয়া যায়।

nameObj.anotherObj.printName.call(nameObj);

উদাহরণ-২ কে call মেথড ব্যবহার করে রান করলে তা nameObj এর প্রথম name কে প্রিন্ট করবে। কারণ আমরা this এর কন্টেক্সট চেঞ্জ করে nameObj করে দিয়েছি। শুধু তাই না। আমরা যদি চাই, তাহলে আমরা সেপারেট একটা অব্জেক্টকেও printName মেথড এর কন্টেক্সট হিসেবে সেট করে দিতে পারি।

উদাহরণ-৩ঃ

const myObj = {
    name: “Rahim Ali”
}
nameObj.anotherObj.printName.call(myObj );

এক্ষেত্রে আমরা printName মেথড এর কন্টেক্সট myObj করে দিলাম। যার ফলে এটি myObj এর name কে প্রিন্ট করবে।

অন্যান্য মেথডসমূহ (bind, apply) একই ভাবে (call এর মতো) কাজ করলেও তাদের মধ্যে সামান্য কিছু পার্থক্য আছে। যেমন bind একটি ফাংশন রিটার্ন করে। তাই বাইন্ড ইউজ করলে অতিরিক্ত একবার ফাংশন কল করতে হয়।

উদাহরণ-৪ঃ

const myObj = {
    name: “Rahim Ali”
}
const changedContext = nameObj.anotherObj.printName.bind(myObj );
changedContext();

apply মেথড এর ক্ষেত্রেও সামান্য পার্থক্য আছে। যদি apply মেথড এ দ্বিতীয় কোনো আর্গুমেন্ট পাঠাতে হয়, তাহলে তা array আকারে পাঠাতে হয়। নিচে উদাহরণ দেয়া হলোঃ

উদাহরণ-৫ঃ

const rahimsObj = {
   name: “Rahim”,
   printDetails: function(age) {
      console.log(`Hi, I am ${this.name} & I am ${age} years old`)
   }
}

const karimsObj = {name: “Karim”};

rahimsObj.printDetails.apply(karimsObj, [42]);

এক্ষেত্রে আমরা age দ্বিতীয় প্যারামিটার হিসেবে array তে পাঠিয়েছি।