আপনার যা জানা উচিত this
this(ওরফে "প্রসঙ্গ") প্রতিটি ফাংশন ভিতরে একটি বিশেষ শব্দ এবং এর মান শুধুমাত্র উপর নির্ভর করে কিভাবে ফাংশন, বলা হত কিভাবে / যখন / এটি যেখানে সংজ্ঞায়িত করা হয়। এটি অন্যান্য ভেরিয়েবলের মতো লেক্সিকাল স্কোপগুলি দ্বারা প্রভাবিত হয় না (তীর ফাংশন ব্যতীত নীচে দেখুন)। এখানে কিছু উদাহরন:
function foo() {
console.log(this);
}
// normal function call
foo(); // `this` will refer to `window`
// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`
// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`
এ সম্পর্কে আরও জানতে this, MDN ডকুমেন্টেশনটি দেখুন ।
কিভাবে সঠিক উল্লেখ করুন this
ব্যবহার করবেন না this
আপনি আসলে thisবিশেষভাবে অ্যাক্সেস করতে চান না , তবে যে বিষয়টি তাকে বোঝায় । একারণে একটি সহজ সমাধান হ'ল একটি নতুন ভেরিয়েবল তৈরি করা যা সেই বস্তুকে বোঝায়। ভেরিয়েবলের কোনও নাম থাকতে পারে তবে সাধারণগুলি হ'ল selfএবং that।
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function() {
alert(self.data);
});
}
যেহেতু selfএকটি সাধারণ পরিবর্তনশীল তাই এটি লেক্সিক স্কোপ বিধি মেনে চলে এবং কলব্যাকের অভ্যন্তরে প্রবেশযোগ্য। এটিরও সুবিধা রয়েছে যে আপনি thisকলব্যাকের মানটি নিজেই অ্যাক্সেস করতে পারবেন ।
স্পষ্টভাবে thisকলব্যাক সেট - অংশ 1
দেখে মনে হতে পারে এর মানটির উপর আপনার কোনও নিয়ন্ত্রণ নেই thisকারণ এর মানটি স্বয়ংক্রিয়ভাবে সেট হয়ে গেছে তবে বাস্তবে তা নয়।
প্রতিটি .bind ফাংশনটিতে পদ্ধতি [ডক্স] থাকে , যা thisএকটি মানকে আবদ্ধ করে একটি নতুন ফাংশন প্রদান করে । ফাংশনটির ঠিক তেমন আচরণ রয়েছে যা আপনি ডেকেছিলেন .bind, কেবল এটিই আপনার thisদ্বারা সেট করা হয়েছিল। কীভাবে বা কখন যে ফাংশনটি বলা হয় তা বিবেচনা করা যায় না, thisসর্বদা উত্তীর্ণ হওয়া মানটি উল্লেখ করে।
function MyConstructor(data, transport) {
this.data = data;
var boundFunction = (function() { // parenthesis are not necessary
alert(this.data); // but might improve readability
}).bind(this); // <- here we are calling `.bind()`
transport.on('data', boundFunction);
}
এই ক্ষেত্রে, আমরা কলব্যাক এর বাঁধাই করা হয় thisএর মান MyConstructorএর this।
দ্রষ্টব্য: jQuery- র জন্য প্রসঙ্গ বাঁধাই করার পরিবর্তে jQuery.proxy [ডক্স] এর পরিবর্তে ব্যবহার করুন। এটি করার কারণটি হ'ল যাতে ইভেন্ট কলব্যাক বন্ধন করার সময় আপনাকে ফাংশনের রেফারেন্সটি সঞ্চয় করতে হবে না। jQuery অভ্যন্তরীণভাবে পরিচালনা করে।
ECMAScript 6: তীর ফাংশন ব্যবহার করুন
ইসমাস্ক্রিপ্ট arrow তীর ফাংশনগুলি উপস্থাপন করে যা ল্যাম্বদা ফাংশন হিসাবে বিবেচনা করা যেতে পারে। তাদের নিজস্ব thisবাঁধাই নেই। পরিবর্তে, thisএকটি সাধারণ ভেরিয়েবলের মতো স্কোপের দিকে তাকানো হয়। তার মানে আপনাকে কল করতে হবে না .bind। এটি তাদের একমাত্র বিশেষ আচরণ নয়, আরও তথ্যের জন্য দয়া করে MDN ডকুমেন্টেশন পড়ুন।
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => alert(this.data));
}
thisকলব্যাক সেট - অংশ 2
কিছু ফাংশন / পদ্ধতি যা কলব্যাকগুলি গ্রহণ করে সেগুলি এমন একটি মানও গ্রহণ করে যার সাথে কলব্যাকগুলি thisউল্লেখ করা উচিত। এটি মূলত এটি নিজেকে বাঁধাই করার সমান, তবে কার্য / পদ্ধতিটি এটি আপনার জন্য করে। Array#map [ডক্স] হল একটি পদ্ধতি such এর স্বাক্ষরটি হ'ল:
array.map(callback[, thisArg])
প্রথম যুক্তি হ'ল কলব্যাক এবং দ্বিতীয় যুক্তি হ'ল মানটি thisউল্লেখ করা উচিত। এখানে একটি স্বীকৃত উদাহরণ:
var arr = [1, 2, 3];
var obj = {multiplier: 42};
var new_arr = arr.map(function(v) {
return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument
দ্রষ্টব্য: আপনি কোনও মান পাস করতে পারবেন কিনা thisতা সাধারণত সেই ফাংশন / পদ্ধতির ডকুমেন্টেশনে উল্লেখ করা হয়। উদাহরণস্বরূপ, jQuery এর $.ajaxপদ্ধতি [ডক্স] নামক একটি বিকল্প বর্ণনা করে context:
এই অবজেক্টটি সমস্ত অ্যাজাক্স-সম্পর্কিত কলব্যাকের প্রসঙ্গ তৈরি করা হবে।
সাধারণ সমস্যা: কলব্যাক / ইভেন্ট হ্যান্ডলার হিসাবে অবজেক্টের পদ্ধতি ব্যবহার করা
এই সমস্যার আর একটি সাধারণ উদ্ভাস হ'ল যখন কোনও বস্তু পদ্ধতি কলব্যাক / ইভেন্ট হ্যান্ডলার হিসাবে ব্যবহৃত হয়। ফাংশনগুলি জাভাস্ক্রিপ্টে প্রথম শ্রেণির নাগরিক এবং "পদ্ধতি" শব্দটি কোনও ফাংশনের জন্য কেবল একটি কথোপকথন শব্দ যা কোনও সামগ্রীর সম্পত্তির মূল্য। তবে সেই ফাংশনটির "ধারণকৃত" অবজেক্টের কোনও নির্দিষ্ট লিঙ্ক নেই।
নিম্নলিখিত উদাহরণ বিবেচনা করুন:
function Foo() {
this.data = 42,
document.body.onclick = this.method;
}
Foo.prototype.method = function() {
console.log(this.data);
};
ফাংশনটি this.methodক্লিক ইভেন্ট হ্যান্ডলার হিসাবে বরাদ্দ করা হয়েছে, তবে যদি document.bodyক্লিক করা হয় তবে লগ করা মানটি হবে undefined, কারণ ইভেন্ট হ্যান্ডলারের অভ্যন্তরে, উদাহরণটিকে নয় , thisবোঝায় ।
ইতিমধ্যে শুরুতে উল্লিখিত হিসাবে, কী বোঝায় ফাংশনটি কীভাবে ডাকা হয় তার উপর নির্ভর করে না কীভাবে এটি সংজ্ঞায়িত হয় ।
কোডটি যদি নীচের মতো হয় তবে এটি আরও স্পষ্ট হতে পারে যে ফাংশনটির অবজেক্টটির অন্তর্নিহিত রেফারেন্স নেই:document.bodyFoo
this
function method() {
console.log(this.data);
}
function Foo() {
this.data = 42,
document.body.onclick = this.method;
}
Foo.prototype.method = method;
সমাধানটি উপরে উল্লিখিত হিসাবে একই: যদি উপলভ্য .bindথাকে তবে স্পষ্টভাবে thisনির্দিষ্ট মানকে আবদ্ধ করতে ব্যবহার করুন
document.body.onclick = this.method.bind(this);
বা স্পষ্টভাবে কলজব্যাক / ইভেন্ট হ্যান্ডলার হিসাবে একটি বেনামি ফাংশন ব্যবহার করে অবজেক্টটির "পদ্ধতি" হিসাবে ফাংশনটি কল করুন এবং অবজেক্টটিকে ( this) অন্য ভেরিয়েবলের জন্য বরাদ্দ করুন :
var self = this;
document.body.onclick = function() {
self.method();
};
বা একটি তীর ফাংশন ব্যবহার করুন:
document.body.onclick = () => this.method();
