সহজ-সরল সিম্পল this
হুদাই পোলাপান this নিয়ে কনফিউজড হয়। এইটা আসলে সিম্পল। জাস্ট একটা উদাহরণ দিলে পানির মতো সোজা হয়ে যাবে।
নিচে একটা student নামে একটা অবজেক্ট আছে। সেটার মধ্যে একটা মেথড আছে। যেটার নাম getThis, আর এই মেথডকে কল করলে সে this-এর মান কনসোল লগ করবে। স্বাভাবিকভাবেই যদি student অবজেক্টের মধ্যে getThis-কে কল করি, তাহলে সে this বলতে student অবজেক্টকে কনসোল লগ করবে। আর এই মেথডকে কল করার জন্য student লিখে ডট চিহ্ন দিয়ে তারপর getThis-কে কল করতে হবে।
const student = {
name: 'Learner',
getThis(){
console.log( this);
}
}
student.getThis();
Output: {name: 'Learner', getThis: ƒ}এইটুক পর্যন্ত বুঝলাম, কোনো মেথডের মধ্যে this বলতে সেই অবজেক্টকে বুঝায়। এইবার getThis মেথডকে ধার করে অন্য অবজেক্টে নিয়ে যাই। সেজন্য teacher নামে একটা অবজেক্ট বানালাম। সেই অবজেক্টে জাস্ট একটা name প্রোপার্টি। আর সেই অবজেক্টে getThis নামে একটা মেথড লিখলাম। আর সেই মেথডটা আসলে student অবজেক্টের getThis।
সেজন্য তুই দেখবি, নিচে সমান চিহ্ন দিয়ে এক অবজেক্টের মেথড অন্য অবজেক্টে নিয়ে আসছি। তারপর যদি teacher-এর পর ডট লিখে getThis কল করি, তাহলে সে কিন্তু teacher অবজেক্টকেই কনসোল লগ করবে।
const teacher = {
name: 'Bambu Donor'
}
teacher.getThis = student.getThis;
teacher.getThis();
Output: {name: 'Bambu Donor', getThis: ƒ}যদিও teacher অবজেক্টের getThis আসলে student অবজেক্টের getThis। তারপরেও teacher-এর পর ডট চিহ্ন দিয়ে সেটাকে কল করার কারণে সে কিন্তু this বলতে টিচারকেই বুঝাইছে।
এইটুক হালকা কনফিউজিং লাগতে পারে। আরেকটা উদাহরণ দেখ।
জাস্ট খুব সিম্পলভাবে freeThis নামে একটা ভেরিয়েবল ডিক্লেয়ার করলাম, যেটার মান হবে student অবজেক্টের getThis মেথড। এখন যদি freeThis নামক এই ফাংশন (যদিও সে স্টুডেন্ট অবজেক্টের getThis থেকে ধার করা) তারপরেও সে this বলতে সে window অবজেক্টকে বুঝাচ্ছে।
const freeThis = student.getThis;
freeThis()this তুমি কার, কে তোমার?
এইবার ভালো করে খেয়াল কর। আমরা একই getThis মেথডকে তিন জায়গায় ইউজ করছি।
১. যখন student অবজেক্টের ওপরে কল করছি, তখন this বলতে সে student অবজেক্টকে বুঝাইছে।
২. যখন teacher অবজেক্টের ওপরে সেই একই getThis মেথডকে কল করছি, তখন this বলতে সে teacher অবজেক্টকে বুঝাইছে।
৩. আবার যখন কোনো কিছু ছাড়াই সেই একই getThis মেথডকে কল করছি, সেটা তখন window অবজেক্টকে বুঝায়।
এইটা থেকে বুঝা যায়। this বলতে কোথায় কীভাবে কল করা হচ্ছে, সেটার ওপরে নির্ভর করে। যদি কোনো অবজেক্টের ওপরে কল করা হয়, তাহলে সে অবজেক্টকে বুঝাবে। আর যদি কোনো কিছুর ওপরে কল করা না হয়, তাহলে সে গ্লোবাল অবজেক্ট বা window অবজেক্টকে বুঝাবে।
student.getThis();
teacher.getThis();অর্থাৎ this বলতে বুঝায় ফাংশন বা মেথড কোন context-এ রান হচ্ছে।
আরও সিম্পলভাবে চিন্তা করলে this যে মেথড বা ফাংশনের ভিতরে লেখা আছে, তার আগে ডট চিহ্নের আগে কি কিছু লেখা আছে। যদি থাকে, তাহলে this বলতে সেটাকে বুঝাবে। আর যদি ডট না থাকে, তাহলে this বলতে window বা গ্লোবাল অবজেক্টকে বুঝাবে।
অর্থাৎ this যদি বুঝতে চাও, ডটের বামপাশে কী আছে, তার দিকে তাকাও।
Practice:
- ল্যাপটপ নামে একটা ভেরিয়েবল ডিক্লেয়ার কর। সেটার মধ্যে ব্র্যান্ড নামে একটা প্রোপার্টি থাকবে, যার মান হবে dell এবং getBrand নামে একটা মেথড থাকবে, যেটা ল্যাপটপের brand-কে কনসোল লগ করবে। এখন মোবাইল নামে একটা অবজেক্ট ডিক্লেয়ার কর। মোবাইলের মধ্যে ব্র্যান্ড থাকবে। তারপর ল্যাপটপ অবজেক্টের getBrand মেথডটি মোবাইলে এনে ইউজ কর।
- this কীভাবে নির্ধারিত হয়? কী কী context-এ এটা পরিবর্তন হয়?
- manager নামে একটি অবজেক্ট তৈরি কর যার মধ্যে assignWork নামে মেথড থাকবে। সেই assignWork মেথড এর ভিতরের manager এর tasks নামক প্রপার্টি (একটা অ্যারে) সেটাতে নতুন টাস্ক এর নাম যোগ করবে। এই কোড লিখে আউটপুট চেক কর। আর এই মেথড এর ভিতরে this বলতে কাকে বুঝায় সেটা মেথডের উপরে কমেন্ট করে লিখ।