this, call, apply আর bind — this কে ঠিক করে

১ · this আসলে কী — “কে ডাকছে” প্রশ্ন

পর্ব ১৪-এ আপনি method লিখেছেন আর দেখেছেন, method-এর ভেতরে this দিয়ে object নিজের ডেটা পড়ে: cart.total()-এর ভেতরে this.items. সেখানে একটি সাবধানবাণীও ছিল — method-কে আলাদা করে নিলে this হারায়। এই পর্বে সেই রহস্যের পুরো সমাধান। শুরুতে একটি বড় ধারণা পরিষ্কার করে নেওয়া দরকার।

বেশিরভাগ object-oriented ভাষায় — C++, Java, C# — this মানে “এই কোড যে object-এর, সেই object”. Method একটি class-এর ভেতরে লেখা থাকে, আর compiler জানে method-টি কোন ধরনের object-এর। তাই this-এর অর্থ লেখার জায়গা দেখেই ঠিক হয়ে যায়।

JavaScript-এ ব্যাপারটি আলাদা। এখানে function একটি স্বাধীন মান (first-class function, পর্ব ১৩)। একই function কোনো object-এর property হতে পারে, আরেকটি object-এর property-ও হতে পারে, variable-এ থাকতে পারে, অন্য function-এ পাঠানো যেতে পারে। Function নিজে জানে না সে “কার”. তাই JavaScript সিদ্ধান্তটি নেয় ডাকার মুহূর্তে: সাধারণ function-এর ভেতরে this কী হবে, তা ঠিক হয় function-টিকে কীভাবে ডাকা হলো তা দেখে — কোথায় লেখা হয়েছে তা দেখে নয়।

এই একটি বাক্যে পুরো পর্বের সারকথা: সাধারণ function-এর this = ডাকার ধরন দেখে; arrow function-এর this = চারপাশের কোড দেখে। সাধারণ function-এর জন্য চারটি নিয়ম আছে, আর arrow-এর জন্য একটি। এই পাঁচটি নিয়ম দিয়ে this-এর প্রতিটি “অদ্ভুত” আচরণ ব্যাখ্যা করা যায় — কোনো ব্যতিক্রম মুখস্থ করতে হয় না।

২ · চারটি নিয়ম আর তাদের অগ্রাধিকার

একটি সাধারণ function (arrow নয়) যেকোনো লাইনে ডাকা হলে, this বের করতে নিচের চারটি প্রশ্ন ক্রমানুসারে করুন। যে প্রশ্নের উত্তর প্রথমে “হ্যাঁ”, সেটিই জিতবে:

আর এই চার প্রশ্নের আগে একটি “শূন্যতম” প্রশ্ন আছে: function-টি কি arrow? হলে চারটি নিয়মের কোনোটিই খাটে না — arrow-এর this সবসময় চারপাশের কোডের this (অংশ ৫)। এখন সিদ্ধান্তের ধাপগুলো চারটি বাস্তব ডাকের ওপর চালিয়ে দেখুন:

function greet() { "use strict"; return this; }
function Shop(name) { this.name = name; }
const riya = { name: "Riya", greet };
const nila = { name: "Nila" };

প্রশ্ন ১: new আছে? হ্যাঁ
→ engine একটি খালি object বানাল, this = সেই object
→ this.name = "Rahim Store"; object-টিই ফেরত

প্রশ্ন ১: new? না
প্রশ্ন ২: call দিয়ে object দেওয়া? হ্যাঁ — nila
→ ডটের বাঁ পাশে riya থাকলেও this = nila

প্রশ্ন ১: না · প্রশ্ন ২: না
প্রশ্ন ৩: obj.method() আকার? হ্যাঁ — ডটের বাঁ পাশে riya
→ this = riya

প্রশ্ন ১, ২, ৩: সব না
→ default binding: function-এ "use strict" আছে
→ this = undefined  // strict না হলে global object

চারটি নিয়ম আর হারানো this — নিজে চালিয়ে দেখুন। Output নিশ্চিত রাখতে function-এর ভেতরে "use strict" দেওয়া হয়েছে, যাতে default binding-এ undefined আসে:

function whoAmI() {
  "use strict";                       // default binding → undefined
  return this === undefined ? "undefined" : this.name;
}
const riya = { name: "Riya", whoAmI };
const nila = { name: "Nila" };

console.log("১ implicit:", riya.whoAmI());
console.log("২ default:", whoAmI());
console.log("৩ explicit:", riya.whoAmI.call(nila));
const lost = riya.whoAmI;             // শুধু function নেওয়া হলো
console.log("৪ হারানো:", lost());

const toNila = whoAmI.bind(nila);
console.log("৫ bind-এর পরে call:", toNila.call(riya));
console.log("৬ আবার bind:", toNila.bind(riya)());

function Shop(name) { this.name = name; }
const NilaShop = Shop.bind(nila);
console.log("৭ new:", new NilaShop("Rahim Store").name, nila.name);

৩ · Default binding — strict mode, sloppy mode আর globalThis

চতুর্থ নিয়মটি সবচেয়ে বেশি বিভ্রান্তি তৈরি করে, কারণ এর উত্তর দুই রকম। JavaScript-এর দুটি “মোড” আছে। পুরোনো, ঢিলেঢালা নিয়মের মোডকে অনানুষ্ঠানিকভাবে বলে sloppy mode; আর ES5 (২০০৯) যোগ করেছে strict mode, যা চালু হয় ফাইল বা function-এর শুরুতে "use strict" লিখলে। ES module (পর্ব ৪৫) আর class-এর ভেতরের সব কোড নিজে থেকেই strict.

কেন strict mode-এ undefined? ধরুন কেউ একটি constructor function new ছাড়া ডাকলেন: const s = Shop("Rahim"). Sloppy mode-এ this হয় window, তাই this.name = "Rahim" লেখে window.name-এ — পুরো পাতার একটি global মান নষ্ট হলো, আর কোনো error নেই। Strict mode-এ this undefined, তাই সাথে সাথে Edge/Chrome বলে TypeError: Cannot set properties of undefined (setting 'name'). ভুল সামনে আসে। নিরাপত্তার কারণও আছে — ভাবনার প্রশ্ন ৩-এ।

globalThis — সব জায়গায় global object-এর একই নাম

Global object-এর নাম জায়গাভেদে আলাদা: ব্রাউজারের পাতায় window, Web Worker-এ self, Node.js-এ global. সব জায়গায় চলে এমন কোড লিখতে আগে মানুষ জটিল কৌশল লিখত। ES2020-এ যুক্ত হয়েছে globalThis — যেকোনো runtime-এ global object-এর একটিই নাম। তাই global object দরকার হলে this-এর ওপর ভরসা না করে সরাসরি globalThis লিখুন।

একটি ছোট কিন্তু গুরুত্বপূর্ণ খুঁটিনাটি: strict কি না, তা ঠিক হয় যে function ডাকা হচ্ছে তার কোড দেখে, কলকারীর কোড দেখে নয়। Strict কোড থেকে একটি sloppy function ডাকলে সেই function-এর ভেতরে default this তখনো global object.

৪ · Implicit binding আর “হারানো this”

Implicit binding-এর শর্তটি খুব আক্ষরিক: ডাকার মুহূর্তে function-এর নামের আগে একটি ডট (বা bracket) আর একটি object থাকতে হবে। riya.greet() — হ্যাঁ। riya["greet"]() — হ্যাঁ। কিন্তু function-টি একবার object থেকে বের করে নিলে, পরে যেখানেই ডাকুন, ডটের বাঁ পাশে আর কেউ থাকে না। এটিই lost this বা “হারানো this” সমস্যা। ধাপে ধাপে দেখুন:

1const cart = {2  owner: "Riya",3  show() { "use strict"; return this?.owner; },4};5console.log(cart.show());6const f = cart.show;7console.log(f());8const g = cart.show.bind(cart);9console.log(g());

কোথায় কোথায় this হারায়

বাস্তবে কেউ const f = cart.show খুব কম লেখেন। কিন্তু একই ঘটনা আরও তিনটি জায়গায় ঘটে, যেগুলো চোখে পড়ে না, কারণ সেখানে function-টিকে callback হিসেবে অন্য কারও হাতে দেওয়া হয় — আর সে নিজের ইচ্ছামতো ডাকে:

• Timer: setTimeout(cart.report, 1000). Timer-কে দেওয়া হলো শুধু function. ব্রাউজার পরে সেটিকে ডাকে this হিসেবে global object দিয়ে (HTML মানদণ্ড অনুযায়ী — strict function হলেও); Node.js-এ this হয় একটি Timeout object. দুই ক্ষেত্রেই cart নয়।
• Array method: orders.forEach(printer.print). forEach callback-কে ডাকে this = undefined দিয়ে (দ্বিতীয় argument না দিলে) — strict-এ undefined, sloppy-তে global object.
• Event listener: button.addEventListener("click", counter.increment). ব্রাউজার সাধারণ function handler-কে ডাকে this = যে element-এ listener বসানো, সেটি দিয়ে — counter নয়, button! এটি পর্ব ৩৮-এ আরও দেখবেন।

নিয়মটি সবগুলোতে একই: আপনি function দিয়েছেন, ডাকছে অন্য কেউ — তাই this ঠিক করছে সে। চারটি প্রচলিত সমাধান:

৫ · Arrow function — নিজের this নেই, চারপাশ থেকে ধার

পর্ব ১৩-এ দেখেছেন, arrow function-এর নিজের this নেই। এর মানে খুব নির্দিষ্ট: arrow-এর ভেতরে this লিখলে engine সেটিকে একটি সাধারণ variable-এর মতো খোঁজে — arrow যেখানে লেখা, তার চারপাশের scope-এ, তারপর আরও বাইরে। একে বলে lexical this. সাধারণ function-এর this ঠিক হয় ডাকার সময়; arrow-এর this ঠিক হয়ে যায় arrow তৈরির সময়, আর আর কখনো বদলায় না।

এর সবচেয়ে বড় উপকার method-এর ভেতরের callback-এ। নিচের stepper-এ একই কাজ দুইভাবে লেখা — একবার arrow callback, একবার সাধারণ function callback:

1const team = {2  name: "Tigers",3  players: ["Riya", "Nila"],4  withArrow() {5    return this.players.map((p) => p + " · " + this.name);6  },7  withFunction() {8    "use strict";9    return this.players.map(function (p) { return this; });10  },11};12team.withArrow();13team.withFunction();

Arrow-এর চারটি “নেই”

• নিজের this নেই — আর call, apply, bind দিয়ে দেওয়া this চুপচাপ উপেক্ষিত হয় (argument-গুলো অবশ্য যায়)। কোনো error আসে না, তাই ভুলটি ধরা কঠিন।
• new দিয়ে ডাকা যায় না — const A = () => {}; new A() দেয় TypeError: A is not a constructor. Arrow-এর prototype property-ও নেই।
• নিজের arguments নেই — arrow-এর ভেতরে arguments লিখলে বাইরের সাধারণ function-এর arguments পাবেন (বা script-এর global স্তরে ReferenceError). Rest parameter (...args) ব্যবহার করুন।
• নিজের super আর new.target নেই — এগুলোও বাইরে থেকে আসে; class-এর প্রসঙ্গে পর্ব ২৬-এ।

৬ · call, apply আর bind — this হাতে বসানো

JavaScript-এ function নিজেও একটি object, আর প্রতিটি সাধারণ function Function.prototype থেকে তিনটি method পায় (prototype কী, তা পর্ব ২৫-এ)। তিনটিরই কাজ this হাতে ঠিক করে দেওয়া, কিন্তু ধরন আলাদা:

মনে রাখার সহজ কৌশল: apply-এর “a” = array, call-এর “c” = comma. আর bind = “পরে চালানোর জন্য বেঁধে রাখো”।

Method ধার করা

call-এর সবচেয়ে সুন্দর ব্যবহার হলো একটি object-এর method আরেকটি object-এর ওপর চালানো — method borrowing. ধরুন একটি দোকানের দাম দেখানোর method আছে, আর আরেকটি দোকানের নিজস্ব মুদ্রা চিহ্ন আছে কিন্তু method নেই। কপি না করে ধার করুন: shop.label.call(otherShop, 120). Method-টি যদি শুধু this-এর মাধ্যমে ডেটা পড়ে, তাহলে যে object-ই দিন, তার ডেটা দিয়েই কাজ করবে।

পুরোনো কোডে একটি বিখ্যাত ধার দেখবেন: Array.prototype.slice.call(arguments). arguments একটি array-like object — length আর সংখ্যার key আছে, কিন্তু array-এর method নেই। Array-এর slice শুধু this.length আর this[0], this[1]… পড়ে, তাই তাকে arguments-এর ওপর চালালে একটি আসল array বেরিয়ে আসে। আজ একই কাজের জন্য আছে Array.from(arguments), spread [...arguments], বা শুরু থেকেই rest parameter.

apply বনাম spread

ES2015-এর আগে একটি array-এর সবচেয়ে বড় মান বের করার প্রচলিত উপায় ছিল Math.max.apply(null, prices) — Math.max আলাদা আলাদা argument চায়, আর apply array-কে argument-এ ভেঙে দেয়। this এখানে অপ্রাসঙ্গিক, তাই null. এখন একই কাজ Math.max(...prices) — পড়তে সহজ (পর্ব ১৭)। তাই আধুনিক কোডে apply কম দেখা যায়; প্রধানত তখনই, যখন this আর array-রূপের argument দুটোই একসাথে দিতে হয়। একটি সতর্কতা: দুই পদ্ধতিতেই প্রতিটি উপাদান একটি আলাদা argument হয়, আর engine-এর argument সংখ্যার একটি সীমা আছে — লক্ষাধিক উপাদানের array-এ RangeError আসতে পারে; তখন reduce বা লুপ নিরাপদ।

bind দিয়ে partial application

bind-এর প্রথম argument this, আর তার পরের argument-গুলো আগেই বসিয়ে রাখা যায়। পরে bound function ডাকলে নতুন argument-গুলো সেগুলোর পেছনে যোগ হয়। পর্ব ২৩-এ যে partial application দেখেছেন, এটি তারই একটি built-in রূপ। যেমন একটি logger, যার প্রতিটি লাইনের শুরুতে একটি স্থির উপসর্গ (prefix) থাকবে: const log = console.log.bind(console, "[cart]"). এখন log("টাইমার বসানো হলো") ছাপে [cart] টাইমার বসানো হলো. this দরকার না হলে প্রথম argument-এ null দেওয়া প্রচলিত: const addVat = add.bind(null, 15).

Bound function-এর তিনটি নিয়ম

একটি bound function আসল function-এর ওপর একটি পাতলা মোড়ক। তার name হয় "bound whoAmI"-এর মতো, আর length থেকে আগে বসানো argument-এর সংখ্যা বাদ যায়। আর তার this কতটা শক্ত, তা ধাপে ধাপে দেখুন:

1function show() { "use strict"; return this?.name; }2const a = { name: "A" }, b = { name: "B" };3const fa = show.bind(a);4console.log(fa());5console.log(fa.call(b));6const fab = fa.bind(b);7console.log(fab());8const o = { name: "O", fa };9console.log(o.fa());

এবার বাস্তব কাজ — একটি কার্ট object, যার method timer-এ গিয়ে this হারায়, দুটি সমাধান, method ধার করা, apply বনাম spread আর উপসর্গ বাঁধা logger:

const cart = {
  owner: "Riya", items: [80, 120, 45],
  report() {
    console.log(`রিপোর্ট: ${this?.owner ?? "কেউ না (this হারিয়েছে)"}`);
  },
  totalLater() {
    setTimeout(() => {                  // arrow: totalLater-এর this ধার করে
      const sum = this.items.reduce((s, p) => s + p, 0);
      console.log(`${this.owner}-এর মোট ${sum} টাকা`);
    }, 40);
  },
};
setTimeout(cart.report, 10);            // ❌ শুধু function গেল
setTimeout(() => cart.report(), 20);    // ✅ arrow wrapper
setTimeout(cart.report.bind(cart), 30); // ✅ bind
cart.totalLater();

const shop = { cur: "৳", label(p) { return this.cur + p; } };
console.log(shop.label.call({ cur: "$" }, 120));   // method ধার
console.log(Math.max.apply(null, cart.items), Math.max(...cart.items));
const log = console.log.bind(console, "[cart]");
log("টাইমার বসানো হলো");

৭ · বিভিন্ন জায়গায় this — একটি পূর্ণ মানচিত্র

চারটি নিয়ম আর arrow-এর নিয়ম মিলিয়ে এখন যেকোনো জায়গার this বলা যায়। এক টেবিলে সব:

একটি “পছন্দ” বোতাম — event handler-এর this

নিচের কোডটি এই পাতায় চালানোর জন্য নয় — DOM আর event-এর বিস্তারিত পর্ব ৩৭ আর ৩৮-এ। শুধু this কোথায় কী, তা দেখুন:

// HTML: <button id="likeBtn">পছন্দ (0)</button>
const counter = {
  count: 0,
  button: document.querySelector("#likeBtn"),
  start() {
    this.button.addEventListener("click", function () {
      this.count++;            // ❌ এখানে this = button, counter নয় → button.count = NaN
    });
    this.button.addEventListener("click", () => {
      this.count++;            // ✅ arrow: start-এর this = counter
      this.button.textContent = `পছন্দ (${this.count})`;
    });
  },
};
counter.start();

প্রথম handler সাধারণ function, তাই ব্রাউজার তাকে this = button দিয়ে ডাকে; button.count আগে ছিল না (undefined), ++ করলে NaN. দ্বিতীয়টি arrow, তাই start-এর this ধার করে — আর start ডাকা হয়েছিল counter.start() দিয়ে। একটি ক্লিকে বোতামে লেখা হয় “পছন্দ (1)”. কখনো কখনো element-টিই দরকার — যেমন একটিমাত্র handler দশটি বোতামে বসিয়ে যেটি চাপা হলো সেটির রং বদলানো। তখন সাধারণ function-এর this সুবিধাজনক, তবে আধুনিক কোডে e.currentTarget লেখাই বেশি স্পষ্ট।

Class-এর arrow field — এক ঝলক

Class-এর method prototype-এ থাকে আর সব object ভাগ করে নেয় (পর্ব ২৫, ২৬); তাই callback হিসেবে পাঠালে সাধারণ method-এর মতোই this হারায়। ES2022-এর class field দিয়ে একটি সমাধান প্রচলিত হয়েছে:

class Cart {
  items = [];
  add = (item) => { this.items.push(item); };  // প্রতিটি object-এর নিজের arrow
  clear() { this.items = []; }                   // prototype-এ — আলাদা করলে this হারায়
}
const c = new Cart();
["চাল", "ডাল"].forEach(c.add);   // ✅ কাজ করে
// setTimeout(c.clear, 0);       // ❌ class strict → this undefined → TypeError

Field initializer constructor-এর সময় চলে, যখন this = নতুন object; arrow সেটিই চিরতরে ধরে রাখে। খরচ: প্রতিটি object-এর জন্য আলাদা একটি function তৈরি হয় (prototype-এ একটি ভাগের function নয়), আর subclass super.add() দিয়ে এটিকে ডাকতে পারে না। তাই শুধু যে method-গুলো সত্যিই callback হিসেবে যাবে, সেগুলোতেই এটি ব্যবহার করুন।

৮ · নিজে একটি bind বানানো — ভেতরে কী ঘটে

কোনো built-in জিনিস সত্যিই বুঝেছেন কি না, তা যাচাইয়ের ভালো উপায় হলো নিজে একটি ছোট সংস্করণ লেখা। ES5 (২০০৯)-এর আগে bind ভাষায় ছিল না; Prototype.js-এর মতো লাইব্রেরি নিজেরাই এটি লিখে দিত, আর পরে পুরোনো ব্রাউজারের জন্য মানুষ ঠিক এমন একটি polyfill ব্যবহার করত। নিচের সংস্করণটি built-in prototype বদলায় না (পর্ব ১৪-এর পরামর্শ মনে রাখুন) — এটি একটি সাধারণ function:

function myBind(fn, thisArg, ...preset) {
  return function bound(...later) {
    const args = [...preset, ...later];        // আগে বসানো + পরে দেওয়া argument
    if (new.target) return new fn(...args);    // new দিয়ে ডাকলে thisArg উপেক্ষা
    return fn.apply(thisArg, args);            // নইলে this = thisArg
  };
}

function greet(greeting, mark) { return `${greeting}, ${this.name}${mark}`; }
const hi = myBind(greet, { name: "Riya" }, "আসসালামু আলাইকুম");
hi("!");                          // "আসসালামু আলাইকুম, Riya!"
hi.call({ name: "Nila" }, "!");   // এখনো "…Riya!" — call হেরে যায়

আসল bind এর চেয়ে নিখুঁত: সে name-এ “bound ” বসায়, length ঠিক করে, bound function-এর নিজের prototype property রাখে না, আর instanceof সঠিকভাবে আসল function-এর দিকে পাঠায়। তবু মূল ভাবনাটি এই কয়েক লাইনেই — bind = closure-এ this ধরে রাখা + apply দিয়ে ডাকা. আর arrow function-কে একইভাবে ভাবা যায়: সে যেন জন্মের সময়ই চারপাশের this-কে closure-এ ধরে রাখে।

৯ · AI-এর যুগে — AI-এর লেখা this-কোড যাচাই করা

this-এর ভুল সাধারণত কোড লেখার সময় দেখা যায় না; দেখা যায় যখন কোনো বোতাম চাপা হয় বা timer চলে — অর্থাৎ পরে, অন্য জায়গায়। AI টুলও এখানে নিয়মিত ভুল করে, কারণ সে লাখো কোডের নমুনা থেকে শেখে, যেখানে React class component-এর .bind(this), jQuery-এর this আর আধুনিক arrow — সব মিশে আছে।

AI-এর লেখা this-কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি this-এর জন্য বলতে পেরেছি, function-টি কে আর কীভাবে ডাকবে — new, call/bind, obj.method(), নাকি খালি
• Object literal বা prototype-এর কোনো method arrow দিয়ে লেখা হয়নি
• যেখানে method অন্য কারও হাতে যায় (timer, array method, event, promise-এর then), সেখানে arrow wrapper, bind বা thisArg আছে
• Method-এর ভেতরের callback সাধারণ function হলে, তার ভেতরে this ব্যবহার করা হয়নি
• Arrow-এর ওপর কোনো .bind/.call নেই, আর অপ্রয়োজনীয় .bind(this) সরিয়েছি
• addEventListener আর removeEventListener একই function reference পায়
• সন্দেহ হলে কোডটি module বা "use strict"-সহ চালিয়েছি, যাতে হারানো this চুপচাপ না থেকে TypeError দেয়