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 }
আপনার উপলব্ধি পরীক্ষা করুন
একটি ওয়েব ব্রাউজারে চলমান একটি স্ক্রিপ্টের জন্য, একটি ফাংশন বা একটি বস্তুর প্রেক্ষাপটের বাইরে ব্যবহার করার সময় this
বিশ্বব্যাপী বস্তুটি কী বোঝায়?
window
বস্তুundefined
বস্তুbrowser
অবজেক্ট