thisজাভাস্ক্রিপ্ট মধ্যে ভিন্নভাবে শব্দ আচরণ করবে অন্যান্য ভাষায় তুলনায়। অবজেক্ট ওরিয়েন্টেড ভাষায়, thisকীওয়ার্ডটি শ্রেণীর বর্তমান উদাহরণকে বোঝায়। জাভাস্ক্রিপ্টে মানটির thisফাংশন ( context.function()) এবং যেখানে এটি বলা হয় তার আহবান প্রসঙ্গে নির্ধারিত হয় ।
1. যখন বিশ্বব্যাপী প্রসঙ্গে ব্যবহৃত হয়
আপনি যখন thisবৈশ্বিক প্রসঙ্গে ব্যবহার করেন, এটি বিশ্বব্যাপী অবজেক্টে আবদ্ধ হয় ( windowব্রাউজারে)
document.write(this); //[object Window]
আপনি যখন thisবৈশ্বিক প্রসঙ্গে সংজ্ঞায়িত কোনও ফাংশনের অভ্যন্তর ব্যবহার করেন তখন thisএখনও বিশ্বব্যাপী অবজেক্টের সাথে আবদ্ধ থাকে কারণ কার্যটি বিশ্বব্যাপী প্রসঙ্গে একটি পদ্ধতি তৈরি করা হয়।
function f1()
{
return this;
}
document.write(f1()); //[object Window]
উপরে f1গ্লোবাল অবজেক্টের একটি পদ্ধতি তৈরি করা হয়েছে। সুতরাং আমরা এটি windowনিম্নলিখিত হিসাবে বস্তুতে কল করতে পারেন :
function f()
{
return this;
}
document.write(window.f()); //[object Window]
২. যখন অবজেক্ট মেথডের ভিতরে ব্যবহার করা হয়
আপনি যখন thisকোনও অবজেক্ট পদ্ধতির ভিতরে কীওয়ার্ড ব্যবহার করেন , this"তাত্ক্ষণিক" এনকোলেজিং অবজেক্টের সাথে আবদ্ধ।
var obj = {
name: "obj",
f: function () {
return this + ":" + this.name;
}
};
document.write(obj.f()); //[object Object]:obj
উপরে আমি শব্দটি তাত্ক্ষণিকভাবে ডাবল উদ্ধৃতিতে রেখেছি। এটি এই বিন্দুটি তৈরি করা হয় যে আপনি যদি অন্য কোনও বস্তুর অভ্যন্তরে কোনও বস্তু বাসা thisবেঁধে দেন তবে তা তাত্ক্ষণিক পিতামাতার সাথে আবদ্ধ।
var obj = {
name: "obj1",
nestedobj: {
name:"nestedobj",
f: function () {
return this + ":" + this.name;
}
}
}
document.write(obj.nestedobj.f()); //[object Object]:nestedobj
এমনকি যদি আপনি কোনও পদক্ষেপ হিসাবে বস্তুটিতে স্পষ্টভাবে ফাংশন যুক্ত করেন তবে এটি এখনও উপরোক্ত নিয়মগুলি অনুসরণ করে যা thisএখনও তাত্ক্ষণিক প্যারেন্ট অবজেক্টের দিকে নির্দেশ করে।
var obj1 = {
name: "obj1",
}
function returnName() {
return this + ":" + this.name;
}
obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1
৩. যখন প্রসঙ্গের চেয়ে কম ফাংশন চাওয়া হয়
আপনি যখন thisঅভ্যন্তরীণ ফাংশনটি ব্যবহার করেন যা কোনও প্রসঙ্গ ছাড়াই ডাকা হয় (অর্থাত্ কোনও বস্তুর উপরে নয়), এটি বিশ্বব্যাপী অবজেক্ট ( windowব্রাউজারে) এর সাথে আবদ্ধ থাকে (এমনকি যদি বস্তুর ভিতরে ফাংশনটি সংজ্ঞায়িত হয়)।
var context = "global";
var obj = {
context: "object",
method: function () {
function f() {
var context = "function";
return this + ":" +this.context;
};
return f(); //invoked without context
}
};
document.write(obj.method()); //[object Window]:global
ফাংশন সহ এটি চেষ্টা করে দেখছি
আমরা উপরের পয়েন্টগুলিও ফাংশন দিয়ে চেষ্টা করতে পারি। যাইহোক, কিছু পার্থক্য আছে.
- আমরা উপরে সদস্য অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করে বস্তুগুলিতে সদস্যদের যোগ। আমরা ব্যবহার করে সদস্যদের ফাংশনে যুক্ত করতে পারি
this। তাদের নির্দিষ্ট করতে।
- অবজেক্ট আক্ষরিক স্বরলিপি বস্তুর একটি উদাহরণ তৈরি করে যা আমরা তাত্ক্ষণিকভাবে ব্যবহার করতে পারি। ফাংশন সহ আমাদের প্রথমে
newঅপারেটরটি ব্যবহার করে এর উদাহরণটি তৈরি করতে পারে ।
- একটি বস্তুর আক্ষরিক পদ্ধতির মধ্যেও আমরা স্পষ্টভাবে বিন্দু অপারেটর ব্যবহার করে সদস্যদের ইতিমধ্যে সংজ্ঞায়িত বস্তুতে যুক্ত করতে পারি। এটি কেবলমাত্র নির্দিষ্ট উদাহরণে যুক্ত হয় to তবে আমি ফাংশন প্রোটোটাইপে পরিবর্তনশীল যুক্ত করেছি যাতে এটি ফাংশনের সমস্ত ক্ষেত্রে প্রতিফলিত হয়।
নীচে আমি অবজেক্ট এবং তারপরে যা করেছি তার সবগুলি চেষ্টা করেছিলাম this, তবে প্রথমে সরাসরি কোনও বস্তু লেখার পরিবর্তে ফাংশন তৈরি করে।
/*********************************************************************
1. When you add variable to the function using this keyword, it
gets added to the function prototype, thus allowing all function
instances to have their own copy of the variables added.
*********************************************************************/
function functionDef()
{
this.name = "ObjDefinition";
this.getName = function(){
return this+":"+this.name;
}
}
obj1 = new functionDef();
document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition
/*********************************************************************
2. Members explicitly added to the function protorype also behave
as above: all function instances have their own copy of the
variable added.
*********************************************************************/
functionDef.prototype.version = 1;
functionDef.prototype.getVersion = function(){
return "v"+this.version; //see how this.version refers to the
//version variable added through
//prototype
}
document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************
3. Illustrating that the function variables added by both above
ways have their own copies across function instances
*********************************************************************/
functionDef.prototype.incrementVersion = function(){
this.version = this.version + 1;
}
var obj2 = new functionDef();
document.write(obj2.getVersion() + "<br />"); //v1
obj2.incrementVersion(); //incrementing version in obj2
//does not affect obj1 version
document.write(obj2.getVersion() + "<br />"); //v2
document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************
4. `this` keyword refers to the immediate parent object. If you
nest the object through function prototype, then `this` inside
object refers to the nested object not the function instance
*********************************************************************/
functionDef.prototype.nestedObj = { name: 'nestedObj',
getName1 : function(){
return this+":"+this.name;
}
};
document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj
/*********************************************************************
5. If the method is on an object's prototype chain, `this` refers
to the object the method was called on, as if the method was on
the object.
*********************************************************************/
var ProtoObj = { fun: function () { return this.a } };
var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
//as its prototype
obj3.a = 999; //adding instance member to obj3
document.write(obj3.fun()+"<br />");//999
//calling obj3.fun() makes
//ProtoObj.fun() to access obj3.a as
//if fun() is defined on obj3
৪. কনস্ট্রাক্টর ফাংশনের অভ্যন্তরে ব্যবহৃত হয় ।
যখন ফাংশনটি কনস্ট্রাক্টর হিসাবে ব্যবহার করা হয় (এটি তখন newকীওয়ার্ড সহ বলা হয় ) তখন thisভিতরে ফাংশনটি নতুন অবজেক্টের দিকে নির্দেশ করে।
var myname = "global context";
function SimpleFun()
{
this.myname = "simple function";
}
var obj1 = new SimpleFun(); //adds myname to obj1
//1. `new` causes `this` inside the SimpleFun() to point to the
// object being constructed thus adding any member
// created inside SimipleFun() using this.membername to the
// object being constructed
//2. And by default `new` makes function to return newly
// constructed object if no explicit return value is specified
document.write(obj1.myname); //simple function
5. প্রোটোটাইপ চেইনে সংজ্ঞায়িত ফাংশনের ভিতরে ব্যবহার করার সময়
যদি পদ্ধতিটি কোনও অবজেক্টের প্রোটোটাইপ শৃঙ্খলে থাকে তবে এই thisজাতীয় পদ্ধতির অভ্যন্তরে অবজেক্টটিকে বোঝানো হয় মেথডটি বলা হয়েছিল, যেমন পদ্ধতিটি কোনও বস্তুর উপর সংজ্ঞায়িত হয়েছে।
var ProtoObj = {
fun: function () {
return this.a;
}
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun()
//to be the method on its prototype chain
var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999
//Notice that fun() is defined on obj3's prototype but
//`this.a` inside fun() retrieves obj3.a
Call. কল () এর অভ্যন্তরে, প্রয়োগ করুন () এবং বাঁধুন () ফাংশন
- এই সমস্ত পদ্ধতি উপর সংজ্ঞায়িত করা হয়
Function.prototype।
- এই পদ্ধতিগুলি একবার একটি ফাংশন লিখতে এবং বিভিন্ন প্রসঙ্গে এটি প্রার্থনা করতে অনুমতি দেয়। অন্য কথায়, তারা
thisফাংশনটি সম্পাদন করার সময় ব্যবহার করা হবে যার মান নির্দিষ্ট করতে দেয় । তারা যখন অনুরোধ করা হয় তখন মূল ফাংশনে যাওয়ার জন্য কোনও পরামিতি নেয় take
fun.apply(obj1 [, argsArray])অভ্যন্তরের obj1মান হিসাবে সেট করে এবং এর আর্গুমেন্ট হিসাবে পাসিং উপাদানগুলিকে কল করে।thisfun()fun()argsArrayfun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])- অভ্যন্তরের obj1মান হিসাবে সেট করে এবং কলগুলি এর আর্গুমেন্ট হিসাবে পাস করে।thisfun()fun()arg1, arg2, arg3, ...fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])- অভ্যন্তরীণ মজাদার আবদ্ধ এবং নির্দিষ্ট পরামিতিগুলির সাথে আবদ্ধ প্যারামিটারগুলির funসাথে ফাংশনটির রেফারেন্স প্রদান করে ।thisobj1funarg1, arg2, arg3,...- এখন এর মধ্যে পার্থক্য
apply, callএবং bindআপাত হয়ে আবশ্যক। applyঅ্যারে-এর মতো অবজেক্ট হিসাবে কাজ করার জন্য আর্গুমেন্টগুলি নির্দিষ্ট করতে দেয় যেমন একটি সংখ্যার lengthসম্পত্তি যুক্ত অবজেক্ট এবং সম্পর্কিত অ-নেতিবাচক পূর্ণসংখ্যার বৈশিষ্ট্য। যেখানে callসরাসরি ফাংশনটিতে যুক্তিগুলি নির্দিষ্ট করার অনুমতি দেয়। উভয়ই applyএবং callতত্ক্ষণাত নির্দিষ্ট প্রসঙ্গে এবং নির্দিষ্ট আর্গুমেন্টের সাথে ক্রিয়াকলাপটি আহ্বান করে। অন্যদিকে, bindকেবল নির্দিষ্ট thisমান এবং যুক্তিগুলির সাথে আবদ্ধ ফাংশনটি কেবল ফিরিয়ে দেয় । আমরা এই ফিরিয়ে আনা ফাংশনটির রেফারেন্সটি একটি ভেরিয়েবলের কাছে নির্ধারিত করে ক্যাপচার করতে পারি এবং পরে আমরা যে কোনও সময় এটি কল করতে পারি।
function add(inc1, inc2)
{
return this.a + inc1 + inc2;
}
var o = { a : 4 };
document.write(add.call(o, 5, 6)+"<br />"); //15
//above add.call(o,5,6) sets `this` inside
//add() to `o` and calls add() resulting:
// this.a + inc1 + inc2 =
// `o.a` i.e. 4 + 5 + 6 = 15
document.write(add.apply(o, [5, 6]) + "<br />"); //15
// `o.a` i.e. 4 + 5 + 6 = 15
var g = add.bind(o, 5, 6); //g: `o.a` i.e. 4 + 5 + 6
document.write(g()+"<br />"); //15
var h = add.bind(o, 5); //h: `o.a` i.e. 4 + 5 + ?
document.write(h(6) + "<br />"); //15
// 4 + 5 + 6 = 15
document.write(h() + "<br />"); //NaN
//no parameter is passed to h()
//thus inc2 inside add() is `undefined`
//4 + 5 + undefined = NaN</code>
7. thisইভেন্ট হ্যান্ডলারের ভিতরে inside
- আপনি যখন কোনও উপাদানের ইভেন্ট হ্যান্ডলারের সরাসরি ফাংশন বরাদ্দ করেন,
thisসরাসরি ইভেন্ট হ্যান্ডলিং ফাংশনটির অভ্যন্তরীণ উপাদানটিকে বোঝায়। যেমন সরাসরি ফাংশন অ্যাসাইনমেন্ট addeventListenerপদ্ধতি ব্যবহার করে বা likeতিহ্যগত ইভেন্ট নিবন্ধকরণ পদ্ধতিগুলির মাধ্যমে করা যেতে পারে onclick।
- একইভাবে, আপনি যখন উপাদানটির
thisইভেন্ট বৈশিষ্ট্যের (যেমন <button onclick="...this..." >) অভ্যন্তরে সরাসরি ব্যবহার করেন তখন এটি উপাদানটিকে বোঝায়।
- তবে
thisইভেন্ট হ্যান্ডলিং ফাংশন বা ইভেন্ট প্রসেসের অভ্যন্তরে ডাকা অন্য ফাংশনের মাধ্যমে অপ্রত্যক্ষভাবে ব্যবহার বিশ্বব্যাপী বস্তুর সমাধান করে window।
- যখন আমরা মাইক্রোসফ্টের ইভেন্ট নিবন্ধকরণ মডেল পদ্ধতিটি ব্যবহার করে ইভেন্ট হ্যান্ডলারের সাথে ফাংশনটি সংযুক্ত করি তখন উপরের একই আচরণটি অর্জন করা হয়
attachEvent। ইভেন্ট হ্যান্ডলারের (এবং এইভাবে উপাদানটির ফাংশন পদ্ধতিটি) ফাংশনটি নির্ধারণের পরিবর্তে এটি ইভেন্টটিতে ফাংশনটিকে কল করে (কার্যকরভাবে এটি বিশ্বব্যাপী প্রেক্ষাপটে কল করে)।
আমি জেএসফিডেলে আরও ভাল করে চেষ্টা করার পরামর্শ দিচ্ছি ।
<script>
function clickedMe() {
alert(this + " : " + this.tagName + " : " + this.id);
}
document.getElementById("button1").addEventListener("click", clickedMe, false);
document.getElementById("button2").onclick = clickedMe;
document.getElementById("button5").attachEvent('onclick', clickedMe);
</script>
<h3>Using `this` "directly" inside event handler or event property</h3>
<button id="button1">click() "assigned" using addEventListner() </button><br />
<button id="button2">click() "assigned" using click() </button><br />
<button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>
<h3>Using `this` "indirectly" inside event handler or event property</h3>
<button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />
<button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />
IE only: <button id="button5">click() "attached" using attachEvent() </button>
8. thisES6 তীর ফাংশনে
একটি তীর ফাংশনে, thisসাধারণ ভেরিয়েবলগুলির মতো আচরণ করবে: এটি এর লেক্সিকাল স্কোপ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হবে। ফাংশনটির thisযেখানে তীর ফাংশনটি সংজ্ঞায়িত করা হয়েছে, এটি তীর ফাংশনটির হবে this।
সুতরাং, এটি একই আচরণ:
(function(){}).bind(this)
নিম্নলিখিত কোডটি দেখুন:
const globalArrowFunction = () => {
return this;
};
console.log(globalArrowFunction()); //window
const contextObject = {
method1: () => {return this},
method2: function(){
return () => {return this};
}
};
console.log(contextObject.method1()); //window
const contextLessFunction = contextObject.method1;
console.log(contextLessFunction()); //window
console.log(contextObject.method2()()) //contextObject
const innerArrowFunction = contextObject.method2();
console.log(innerArrowFunction()); //contextObject
