জাভাস্ক্রিপ্ট

this কিওয়ার্ডটি JavaScript এ একটি বিশেষ কিওয়ার্ড যা বর্তমান কনটেক্সট বা প্রসঙ্গকে নির্দেশ করে। বিভিন্ন কনটেক্সটে this কিওয়ার্ডের মান ভিন্ন হতে পারে। এটি কোডের কী অংশে this ব্যবহার করা হচ্ছে তার উপর নির্ভর করে পরিবর্তিত হয়।

this কিওয়ার্ড কি ?

JavaScript এ this কিওয়ার্ডের মূল উদ্দেশ্য হল বর্তমানে যে অবজেক্টটি কাজ করছে তার রেফারেন্স প্রদান করা। যখন কোনো ফাংশন বা অবজেক্টের মেথডে this ব্যবহার করা হয়, তখন this সেই অবজেক্টের প্রতি ইঙ্গিত করে যার মধ্যে সেই ফাংশন বা মেথডটি চলছে।

গ্লোবাল কনটেক্সটে this

যদি আপনি গ্লোবাল স্কোপে this ব্যবহার করেন, তাহলে এটি গ্লোবাল অবজেক্টকে নির্দেশ করে। ব্রাউজারে গ্লোবাল অবজেক্টটি window

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Scope</title>
    <script>
        function showGlobalThis() {
            alert(this); // এটি `window` অবজেক্ট প্রদর্শন করবে
        }
    </script>
</head>
<body>
    <button onclick="showGlobalThis()">Show Global this</button>
</body>
</html>

কোড এডিটর

অবজেক্টের মেথডে this

যখন একটি ফাংশন অবজেক্টের মেথড হিসেবে ব্যবহার করা হয়, তখন this সেই অবজেক্টকে নির্দেশ করে যার মধ্যে মেথডটি চলছে। নিচে এর একটি উদাওরন দেকুন।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Method Context</title>
    <script>
        const person = {
            name: 'John',
            greet: function() {
                alert('Hello, ' + this.name); // `this.name` এখানে `person.name` নির্দেশ করে
            }
        };
    </script>
</head>
<body>
    <button onclick="person.greet()">Greet Person</button>
</body>
</html>

কোড এডিটর

this কিওয়ার্ড ফাংশন হিসেবে কল করা হলে

যদি একটি ফাংশনকে সাধারণ ফাংশন হিসেবে কল করা হয়, তাহলে this গ্লোবাল অবজেক্টকে নির্দেশ করে (Strict Mode ছাড়া)।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function Call</title>
    <script>
        function showThis() {
            alert(this); // গ্লোবাল অবজেক্ট (window) প্রদর্শন করবে
        }
    </script>
</head>
<body>
    <button onclick="showThis()">Show this in Function</button>
</body>
</html>

কোড এডিটর

কনস্ট্রাক্টর ফাংশনে this

যখন একটি কনস্ট্রাক্টর ফাংশন ব্যবহার করে একটি অবজেক্ট তৈরি করা হয়, this সেই নতুন অবজেক্টকে নির্দেশ করে।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Constructor Function</title>
    <script>
        function Person(name) {
            this.name = name;
        }

        Person.prototype.greet = function() {
            alert('Hello, ' + this.name); // এখানে `this` নতুন অবজেক্টকে নির্দেশ করে
        };
    </script>
</head>
<body>
    <button onclick="const person = new Person('Jane'); person.greet();">Create Person & Greet</button>
</body>
</html>

কোড এডিটর

this কিওয়ার্ডের সাথে Arrow Functions

Arrow functions এ this কিওয়ার্ডের আচরণ সাধারণ ফাংশনের চেয়ে আলাদা। Arrow functions এ this কিওয়ার্ড প্যারেন্ট স্কোপ থেকে এসেছে। তাই এটি নিজেদের কনটেক্সট তৈরি করে না।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrow Functions</title>
    <script>
        const person = {
            name: 'Alice',
            greet: function() {
                setTimeout(() => {
                    alert('Hello, ' + this.name); // এখানে `this` `person` অবজেক্ট নির্দেশ করে
                }, 1000);
            }
        };
    </script>
</head>
<body>
    <button onclick="person.greet()">Greet with Arrow Function
</body>
</html>

কোড এডিটর

this এবং Event Handlers

Event handlers এ this কিওয়ার্ড ব্যবহার করা হলে এটি সেই DOM এলিমেন্টকে নির্দেশ করে যেটি ইভেন্ট ট্রিগার করেছে।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handlers</title>
    <script>
        function showElement() {
            alert(this.tagName); // এখানে `this` সেই DOM এলিমেন্ট নির্দেশ করে যা ক্লিক করা হয়েছে
        }
    </script>
</head>
<body>
    <button onclick="showElement()">Click Me</button>
</body>
</html>

কোড এডিটর

this এবং Strict Mode

Strict mode চালু থাকলে, this গ্লোবাল অবজেক্টকে নির্দেশ করে না। এর পরিবর্তে, this undefined হতে পারে।Strict mode চালু থাকলে, this গ্লোবাল অবজেক্টকে নির্দেশ করে না। এর পরিবর্তে, this undefined হতে পারে।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strict Mode</title>
    <script>
        'use strict';

        function showStrictThis() {
            alert(this); // Strict mode তে `this` `undefined` হবে
        }
    </script>
</head>
<body>
    <button onclick="showStrictThis()">Show Strict Mode this</button>
</body>
</html>

কোড এডিটর

this কিওয়ার্ডের ব্যবহার ক্লাসে

JavaScript ক্লাসে this কিওয়ার্ড কিভাবে কাজ করে তা এখানে দেখা যাবে। ক্লাসের মেথডে this কিওয়ার্ড ক্লাসের বর্তমান ইনস্ট্যান্সকে নির্দেশ করে।

উদাহরণ


<!DOCTYPE html>
<<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <<title>Class Example</title>
    <script>
        class Animal {
            constructor(name) {
                this.name = name;
            }

            speak() {
                alert(this.name + ' makes a noise.'); // এখানে `this` ক্লাসের ইনস্ট্যান্স নির্দেশ করে
            }
        }

        const dog = new Animal('Dog');
    </script>
</head>
<body>
    <button onclick="dog.speak()">Dog Speak</button>
</body>
</html>

কোড এডিটর

this কিওয়ার্ড এবং DOM Manipulation

DOM ম্যানিপুলেশনের সময়ও this কিওয়ার্ড ব্যবহার করা হয়। DOM ইভেন্টে this সাধারণত ইভেন্ট ট্রিগার করা এলিমেন্ট নির্দেশ করে।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
    <script>
        function changeColor() {
            this.style.backgroundColor = 'yellow'; // এখানে `this` ক্লিক করা এলিমেন্ট নির্দেশ করে
        }
    </script>
</head>
<body>
    <div onclick="changeColor()" style="width: 100px; height: 100px; background-color: lightblue;">
        Click me
    </div>
</body>
</html>

কোড এডিটর

উপসংহার

this কিওয়ার্ড JavaScript এ একটি শক্তিশালী টুল যা বিভিন্ন কনটেক্সটে ভিন্ন ভিন্ন মান ধারণ করে। এর ব্যবহার বুঝতে পারলে কোড লেখার সময় আপনার কনটেক্সট বা প্রসঙ্গ বুঝতে অনেক সুবিধা হবে। আশা করি এই টিউটোরিয়াল আপনাকে this কিওয়ার্ডের বিভিন্ন ব্যবহার সম্পর্কে ভালো ধারণা দিয়েছে।

« পূর্ববর্তীপাতা

পরবর্তীপাতা »