2.10 দিস (this) কিওয়ার্ড

 

আজকে আলোচনা করতে যাচ্ছি “this” কিওয়ার্ড নিয়ে। জাভাস্ক্রিপ্টে একটি মারাত্মক ভয়ের নাম হচ্ছে “this”। এটি খুবই গুরুত্বপূর্ণ একটা টার্মস যার সম্পর্কে পরিষ্কার ধারণা থাকা উচিত বলে আমি মনে করি। শুরুর দিকে এটা নিয়ে প্রায় সবাই একটু কনফিউশনে ভুগে। কারণ এটি এক এক সময় এক এক রকম আউটপুট দেয়। আমাদের বুঝতে হবে কেন এবং কখন কি আউটপুট দেয়। আমি চেষ্টা করবো ব্যাপারটাকে যতটা সম্ভব সহজভাবে লেখার জন্যে যাতে করে এই “this” নিয়ে আজকের পর থেকে কারোর কোন প্রকার কনফিউশন না থাকে এবং কারোর মাথার উপর দিয়ে না যায়।

চলুন একটা উদাহরণ দিয়ে শুরু করা যাকঃ

 
 
 
function myFunc() {
console.log(this);
}
 
myFunc();
 

একটু চিন্তা করুন তো এখানে myFunc() ফাংশনটিকে কে কল করতেছে। যদি এইটা ধরতে পারেন তাহলে myFunc() এর আউটপুট কি হবে সেইটাও বুঝতে পারবেন। একটু চিন্তা করুন সময় নিয়ে।

আশা করি, চিন্তা করেছেন এবং ধরতেও পেরেছেন। যদি না পারেন তাহলে কোন সমস্যা নেই। একটা ব্যাপার সব সময় মাথায় রাখবেন যে “this” এর ভ্যালু কি হবে সেটা নির্ভর করে কোথায় এবং কিভাবে কল হচ্ছে তার উপর ভিত্তি করে। উপরের কোডে myFunc() কে কল করতেছে window অবজেক্ট। কারণ ব্রাউজারে সব কিছু বাই ডিফল্ট window অবজেক্টের আন্ডারে রান হয়। তার মানে হচ্ছে, যে যার মাধ্যমে কল হবে “this” তাকে দেখাবে আউটপুট হিসাবে।

যেহেতু myFunc() কে window কল করতেছে তাই myFunc() এর ভিতরে থাকা “this” – window এর সব ভ্যালুকে আউটপুট হিসাবে দেখাচ্ছে।

আমরা না অনেক ভাল প্রোগ্রামার। তাই ‘use strict’; মোডে উপরের কোডটি আবার রান করুন এবং দেখুন কি হয়।

এইবার চলুন আরেকটি উদাহরণ দেখিঃ

 
 
 
let Person = {
name: “Shahan’s Diary”,
sayName: function() {
console.log(this);
}
};
 
Person.sayName();
 

 

এইবার বলুন তো উপরের কোডটির আউটপুট কি হবে। যারা বলতে পারবেন তাদের জন্যে থাকবে আমার পক্ষ থেকে একটি চকোলেট। যদি উপরের বলা কথাগুলা ভাল করে পড়ে থাকেন, বুঝতে কোন অসুবিধা হওয়ার কথা না। উপরের কোডের আউটপুট কি হবে। শুধু একটা কথা ভাল করে মনে রাখবেন কোন ফাংশন কল করার সময় ফাংশনের নামের ডটের আগে যে অবজেক্ট নামটা থাকবে তার ভ্যালুই দেখাবে। হ্যাঁ, আমি যদিও অবজেক্টের ভিতরে থাকা ফাংশনকে ফাংশন বলতেছি শুধু বোঝার সুবিধার জন্যে। এটা ফাংশন হবে না, কারণ অবজেক্টের ভিতরে থাকা সব ফাংশনকে বলা হয় মেথড। উপরের কোডের আউটপুট হবে নিচের দেওয়া স্নিপেটের মত।

{name: “Shahan’s Diary”, sayName: f}

এখন দেখবো কনস্ট্রাক্টর ফাংশনে “this” নিয়ে কিভাবে কাজ করা যায়।

 
 
 
let Person = function(fName, lName) {
this.fName = fName;
this.lName = lName;
this.sayInfo = function() {
return console.log(“Hi there, Welcome to “ + this.fName + ” “ + this.lName);
}
};
 
let person1 = new Person(“Shahan’s”, “Diary”);
 
person1.sayInfo(); // Hi there, Welcome to Shahan’s Diary
 

আশা করি, আপনাদের “this” এর বেসিক ধারণাটা এখন পরিষ্কার হয়েছে। এখন থেকে দেখলেই বুঝবেন যে “this” কি কাজ করছে। হ্যাঁ, এই লেখাটা পড়েই আপনি “this” এর মাস্টার হয়ে যাবেন না। এর আরেকটু অ্যাডভান্সড ব্যবহার রয়েছে। সেটা আপনাদের জন্যে রেখে দিলাম। একটু কষ্ট করে নিজ দায়িত্বে দেখে নিবেন।

  • Function context এ this with ‘use strict’ mode
    function show() {
    “use strict”;
    console.log(this === undefined); // true
    function display() {
    console.log(this === undefined); // true
    }
    display();
    }
    show();
     
  • Function context এ this without ‘use strict’ mode
    function show() {
    console.log(this === window); // true
    }
    show(); // true
    window.show(); //true
     
  • Global context এ this
    console.log(this === window); // true
    this.color = “Green”;
    console.log(this.color); // ‘Green’
    console.log(window.color); // ‘Green’
     
  • this সেই object কে উল্লেখ করে ফাংশনটি যার property.অন্য কথায়, this সেই object কে refer করে যা বর্তমানে ফাংশনটিকে কল করছে। ধরুন আপনার counter নামক একটি object আছে। এই counter object এ next() নামে একটি method আছে। যখন আপনি next() method কল করেন, আপনি এই object টি অ্যাক্সেস করতে পারেন।
    const counter = {
    count: 0,
    next: function () {
    return ++this.count;
    },
    };
    counter.next(); // 1
    counter.next(); // 2
    counter.next(); // 3
  • জাভাস্ক্রিপ্টে  দিস (this) কীওয়ার্ড কি?
  • নিচের কোডের আউটপুট কি হবে?
    const object = {
    message: ‘Hello, World!’,
    getMessage() {
    const message = ‘Hello, Earth!’;
    return this.message;
    },
    };
    console.log(object.getMessage());
     
  • নিচের কোডের আউটপুট কি হবে?
    function Pet(name) {
    this.name = name;
    this.getName = () => this.name;
    }
    const cat = new Pet(‘Fluffy’);
    console.log(cat.getName()); // What is logged?
    const { getName } = cat;
    console.log(getName()); // What is logged?
     
  • নিচের কোডের আউটপুট কি হবে?
    var length = 4;
    function callback() {
    console.log(this.length); // What is logged?
    }
    const object = {
    length: 5,
    method(callback) {
    callback();
    },
    };
    object.method(callback, 1, 2);