এই কীওয়ার্ড

this কীওয়ার্ডটি কলের সময় ফাংশনের সাথে আবদ্ধ অবজেক্টের মানকে নির্দেশ করে, যার অর্থ একটি ফাংশনকে একটি পদ্ধতি হিসাবে, একটি স্বতন্ত্র ফাংশন হিসাবে বা একটি কনস্ট্রাক্টর হিসাবে বলা হয় কিনা তার উপর নির্ভর করে এর মানটি আলাদা।

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

গ্লোবাল বাঁধাই

একটি ফাংশন বা একটি অবজেক্টের প্রেক্ষাপটের বাইরে, this globalThis বৈশিষ্ট্যকে বোঝায়, যা বেশিরভাগ জাভাস্ক্রিপ্ট পরিবেশে গ্লোবাল অবজেক্টের একটি রেফারেন্স। একটি ওয়েব ব্রাউজারে চলমান একটি স্ক্রিপ্টের প্রসঙ্গে, গ্লোবাল অবজেক্ট হল window অবজেক্ট:

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

Node.js-এ, globalThis এটি global বস্তু:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

কঠোর মোডের বাইরে, this একটি স্বতন্ত্র ফাংশনের ভিতরের গ্লোবাল অবজেক্টকেও বোঝায়, কারণ প্যারেন্ট Window হল সেই বস্তু যা কার্যকরভাবে সেই ফাংশনগুলির "মালিকানা"।

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

কঠোর মোড ব্যবহার করার সময়, this একটি স্বতন্ত্র ফাংশনের ভিতরে undefined মান রয়েছে:

(function() {
    "use strict";
    console.log( this );
}());
> undefined

কঠোর মোড প্রবর্তনের আগে, this জন্য একটি null বা undefined মান বিশ্বব্যাপী বস্তুর একটি রেফারেন্স দ্বারা প্রতিস্থাপিত হবে। আপনি কখনও কখনও এই উত্তরাধিকার আচরণের কারণে গ্লোবাল বাইন্ডিংকে "ডিফল্ট বাইন্ডিং" হিসাবে উল্লেখ করতে পারেন।

অন্তর্নিহিত বাঁধাই

যখন একটি ফাংশনকে একটি অবজেক্টের একটি পদ্ধতি হিসাবে বলা হয়, তখন সেই পদ্ধতির ভিতরে this একটি উদাহরণ সেই বস্তুটিকে বোঝায় যেটিতে পদ্ধতিটি রয়েছে, এটির পাশে থাকা পদ্ধতি এবং বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়:

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

এটি দেখতে কেমন হতে পারে this মান নির্ভর করে কিভাবে একটি ফাংশন এবং এর এনক্লোজিং অবজেক্টকে সংজ্ঞায়িত করা হয়। পরিবর্তে, this মানের জন্য প্রসঙ্গ হল বর্তমান মৃত্যুদন্ডের প্রসঙ্গ। এই ক্ষেত্রে, এক্সিকিউশন প্রসঙ্গ হল যে myObject অবজেক্টটি myMethod পদ্ধতিতে কল করছে, this myObject এর মান। এটি পূর্ববর্তী উদাহরণগুলির পরিপ্রেক্ষিতে একটি প্রযুক্তিগত বলে মনে হতে পারে, কিন্তু this আরও উন্নত ব্যবহারের জন্য, এটি মনে রাখা একটি অপরিহার্য পার্থক্য।

সাধারণভাবে, this এমনভাবে ব্যবহার করুন যাতে আশেপাশের কোডের কোনো নির্দিষ্ট কাঠামোর আশা করা যায় না। এই নিয়মের ব্যতিক্রম হল ES5 অ্যারো ফাংশন ।

this তীর ফাংশন

তীর ফাংশনে , this একটি আভিধানিকভাবে ঘেরা পরিবেশে একটি বাঁধনের সমাধান করে। এর মানে হল যে একটি তীর ফাংশনে this সেই ফাংশনের সবচেয়ে কাছের এনক্লোসিং প্রসঙ্গে this মানকে বোঝায়:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

পূর্ববর্তী উদাহরণে, myObject.myMethod() myObject সেই পদ্ধতির "মালিকানাধীন" বস্তু হিসাবে লগ করে, কিন্তু myObject.myArrowFunction() globalThis (বা undefined ) প্রদান করে, কারণ তীর ফাংশনের ভিতরে this উদাহরণটি সর্বোচ্চ এনক্লোসিংকে বোঝায়। সুযোগ

নিম্নলিখিত উদাহরণে, myEnclosingMethod বস্তুটির উপর একটি তীর ফাংশন তৈরি করে যা এটি কার্যকর করার সময় এটি ধারণ করে। তীর ফাংশনের ভিতরে this উদাহরণটি এখন ঘেরা পরিবেশের ভিতরে this মানকে বোঝায়, যা সেই পদ্ধতি যা সেই তীর ফাংশন ধারণ করে। কারণ myEnclosingMethod ভিতরে this মান myObject কে নির্দেশ করে, আপনি তীর ফাংশনটি সংজ্ঞায়িত করার পরে, তীর ফাংশনের ভিতরে this myObject কেও বোঝায়:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

স্পষ্ট বাঁধাই

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

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

যদিও setTimeout এই নির্দিষ্ট ঘাটতিটি অন্যান্য বৈশিষ্ট্যগুলির দ্বারা সমাধান করা হয়েছে, this "হারানোর" অনুরূপ সমস্যাগুলি পূর্বে উদ্দেশ্যপ্রণোদিত প্রেক্ষাপটের পরিধির মধ্যে this মূল্যের একটি সুস্পষ্ট রেফারেন্স তৈরি করে সমাধান করা হয়েছে। আপনি মাঝে মাঝে this একটি ভেরিয়েবলে বরাদ্দ করার দৃষ্টান্ত দেখতে পারেন যেমন লিগ্যাসি কোডবেসে that , self , বা _this এর মতো শনাক্তকারী ব্যবহার করে। this মানটি পাস করা ভেরিয়েবলগুলির জন্য এইগুলি সাধারণ শনাক্তকারী প্রথা।

আপনি যখন call() , bind() , বা apply() পদ্ধতি ব্যবহার করে একটি ফাংশন কল করেন, তখন this স্পষ্টভাবে উল্লেখ করে যে বস্তুটিকে বলা হচ্ছে:

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

স্পষ্ট বাঁধাই অন্তর্নিহিত বাইন্ডিং দ্বারা প্রদত্ত this মানটিকে ওভাররাইড করে।

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

যদি একটি ফাংশনকে এমনভাবে কল করা হয় যা this মানকে undefined বা null তে সেট করবে, তাহলে সেই মানটিকে globalThis বাইরে কঠোর মোড দ্বারা প্রতিস্থাপিত করা হবে:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

একইভাবে, যদি একটি ফাংশনকে এমনভাবে কল করা হয় যা this একটি আদিম মান দেবে, তাহলে সেই মানটি কঠোর মোডের বাইরে আদিম মানের মোড়ক বস্তুর সাথে প্রতিস্থাপিত হয়:

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

কঠোর মোডে, পাস করা this মানটিকে কোনো বস্তুর সাথে জোর করে চাপানো হয় না, এমনকি যদি এটি একটি আদিম, null বা undefined মান হয়:

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new বাঁধাই

যখন একটি ক্লাস new কীওয়ার্ড ব্যবহার করে কনস্ট্রাক্টর হিসাবে ব্যবহার করা হয়, তখন this সদ্য তৈরি হওয়া উদাহরণকে বোঝায়:

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

একইভাবে, একটি কনস্ট্রাক্টর ফাংশনের ভিতরে this মান new ব্যবহার করে তৈরি করা বস্তুকে বোঝায়:

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

ইভেন্ট হ্যান্ডলার বাঁধাই

ইভেন্ট হ্যান্ডলারের পরিপ্রেক্ষিতে, this মান সেই বস্তুর উল্লেখ করে যা এটিকে আহ্বান করে। একটি ইভেন্ট হ্যান্ডলারের কলব্যাক ফাংশনের ভিতরে, এর মানে this হ্যান্ডলারের সাথে যুক্ত উপাদানটিকে উল্লেখ করে:

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

যখন একজন ব্যবহারকারী পূর্ববর্তী স্নিপেটে button সাথে ইন্টারঅ্যাক্ট করে, ফলাফলটি হল উপাদান বস্তুটি যার মধ্যে <button> রয়েছে:

> Button {}

যখন একটি তীর ফাংশন একটি ইভেন্ট লিসেনার কলব্যাক হিসাবে ব্যবহার করা হয়, তখন this মান আবার নিকটতম এনক্লোজিং এক্সিকিউশন প্রসঙ্গ দ্বারা প্রদান করা হয়। শীর্ষ স্তরে, এর মানে হল this একটি ইভেন্ট হ্যান্ডলার কলব্যাক ফাংশনের ভিতরে globalThis এটি (বা undefined , কঠোর মোডে):

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

অন্য যেকোন অবজেক্টের মতো, আপনি যখন কোনো ইভেন্ট লিসেনারের কলব্যাক ফাংশন রেফারেন্স করতে call() , bind() , বা apply() পদ্ধতি ব্যবহার করেন, তখন this বস্তুটিকে স্পষ্টভাবে উল্লেখ করে:

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

আপনার উপলব্ধি পরীক্ষা করুন