জাভাস্কিপ্ট এ 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
তে পাঠিয়েছি।