prototype আর prototype chain — JavaScript-এর উত্তরাধিকার

১ · মূল ধারণা — আচরণ কপি হয় না, ধার করা হয়

পর্ব ১৪-এ একটি অবাক করা জিনিস দেখেছিলেন: { name: "Riya" }-এর ভেতরে আপনি কোনো toString লেখেননি, তবুও cust.toString() চলে। কোথা থেকে এল? সেখানে উত্তরের শুরুটা দেখেছিলেন — একটি লুকানো শিকল। এই পর্বে সেই শিকলের পুরো গল্প।

Java, C++ বা Python-এর মতো বেশিরভাগ ভাষায় object তৈরি হয় একটি class নামের ছাঁচ থেকে। ছাঁচে লেখা থাকে কোন কোন method থাকবে, আর প্রতিটি object সেই ছাঁচের একটি “কপি”। JavaScript-এর মূল নকশা আলাদা। এখানে কোনো ছাঁচ লাগে না। প্রতিটি object-এর ভেতরে একটি লুকানো link থাকে আরেকটি সাধারণ object-এর দিকে — সেটিই তার prototype. কোনো property নিজের ভেতরে না পেলে object বলে, “আমার নেই, আমার prototype-কে জিজ্ঞেস করো।” Prototype-এরও না থাকলে সে আবার তার prototype-কে জিজ্ঞেস করে। এভাবে কাজ অন্যকে দিয়ে করিয়ে নেওয়াকে বলে delegation.

কেন এই নকশা কাজের — তিনটি সুবিধা

২ · [[Prototype]] বনাম prototype — সবচেয়ে বিভ্রান্তিকর নামকরণ

প্রথমেই সবচেয়ে বড় ধাঁধাটি পরিষ্কার করা যাক, কারণ এটি না বুঝলে বাকি সব গুলিয়ে যায়। JavaScript-এ “prototype” শব্দটি দুটি আলাদা জিনিস বোঝাতে ব্যবহার হয়:

1. [[Prototype]] — প্রতিটি object-এর একটি লুকানো ঘর। ভাষার specification-এ ডাবল বর্গবন্ধনী দিয়ে লেখা নাম মানে internal slot — engine-এর ভেতরের তথ্য, যা obj.something লিখে সরাসরি পড়া যায় না। এর মান হয় আরেকটি object, অথবা null. এটিই সেই link, যা ধরে property খোঁজা হয়।
2. Fn.prototype — শুধু function-এর একটি সাধারণ, দেখা যায় এমন property. এর একটিই কাজ: new Fn() দিয়ে যে নতুন object তৈরি হবে, তার [[Prototype]]-এ কোন object বসবে, তা বলে দেওয়া। একে বলব prototype property.

পড়া আর বদলানো — getPrototypeOf, setPrototypeOf

লুকানো ঘরটি পড়ার মানক উপায় Object.getPrototypeOf(obj) (ES5 থেকে)। বদলানোর উপায় Object.setPrototypeOf(obj, proto) (ES2015 থেকে):

const base = { greet() { return "আসসালামু আলাইকুম, " + this.name; } };
const user = { name: "Tania" };

Object.getPrototypeOf(user) === Object.prototype;  // true
Object.setPrototypeOf(user, base);                 // ⚠️ চলে, কিন্তু ধীর
user.greet();                                      // "আসসালামু আলাইকুম, Tania"
Object.getPrototypeOf(Object.prototype);           // null — শিকলের শেষ

__proto__ — পুরোনো দরজা, এখনো খোলা

পুরোনো কোড আর অনেক ব্লগে দেখবেন obj.__proto__. এটি একটি __proto__ accessor — Object.prototype-এ বসানো একটি getter/setter জোড়া, যা পড়লে [[Prototype]] দেয় আর লিখলে বদলায়। শুরুতে এটি ছিল Netscape/Mozilla-র নিজস্ব বৈশিষ্ট্য; ওয়েবের এত সাইট এটি ব্যবহার করত যে অন্য browser-ও নকল করে। ES2015 এটিকে মানদণ্ডে আনে, কিন্তু মূল অংশে নয় — Annex B-এ, যেখানে থাকে “শুধু পুরোনো ওয়েব চালু রাখার জন্য” রাখা বৈশিষ্ট্য।

৩ · Object.create — prototype বেছে নিয়ে object তৈরি

Prototype ঠিক করার সবচেয়ে সরাসরি উপায় Object.create(proto) (ES5): “একটি নতুন খালি object বানাও, যার [[Prototype]] হবে এই proto.” কোনো constructor নেই, কোনো new নেই — শুধু object আর link. Prototype-ভিত্তিক চিন্তার সবচেয়ে খাঁটি রূপ এটিই:

const productMethods = {
  priceWithVat() { return Math.round(this.price * 1.15); },
  label() { return `${this.name} — ৳${this.priceWithVat()}`; },
};

const rice = Object.create(productMethods);   // rice → productMethods → Object.prototype
rice.name = "চাল";
rice.price = 70;
rice.label();                                 // "চাল — ৳81"
Object.keys(rice);                            // [ 'name', 'price' ] — method নিজের নয়

Object.create(null) — কোনো উত্তরাধিকার নেই এমন dictionary

proto হিসেবে null দিলে এমন object তৈরি হয় যার শিকল সাথে সাথেই শেষ — Object.prototype-ও নেই। একে বলে null-prototype object. এতে toString, hasOwnProperty, constructor, __proto__ — কিছুই নেই। শুনতে অসুবিধার মনে হয়, কিন্তু “শব্দ → সংখ্যা” ধরনের dictionary-র জন্য ঠিক এটিই চাই:

• লুকানো key নেই: সাধারণ {}-এ "constructor" in counts সত্য — যদিও আপনি কখনো সেই শব্দ গোনেননি। Null-prototype object-এ মিথ্যা।
• "__proto__" সাধারণ key: সেখানে কোনো setter নেই, তাই user-এর লেখা "__proto__" শব্দটিও অন্য যেকোনো শব্দের মতো গোনা হয়, prototype বদলায় না।
• যাচাই Object.hasOwn দিয়ে: object-এর নিজের hasOwnProperty method নেই, তাই Object.hasOwn (পর্ব ১৪) ব্যবহার করুন।

পর্ব ১৪-এ দেখা Object.groupBy-এর ফলাফল ঠিক এমন null-prototype object — একই কারণে। অংশ ৭-এর runnable উদাহরণে দেখবেন, একটি বাক্যে “constructor” আর “__proto__” শব্দ থাকলে সাধারণ {} দিয়ে শব্দ গোনা কীভাবে ভুল হয়, আর Object.create(null) কীভাবে ঠিক থাকে। আধুনিক কোডে এর আরেকটি বিকল্প পর্ব ১৮-এর Map — যেখানে key যেকোনো কিছু, আর inherited key-এর প্রশ্নই নেই।

৪ · Property খোঁজার নিয়ম — পড়া ওপরে যায়, লেখা যায় না

এবার engine-এর খোঁজার নিয়মটি পুরোপুরি লিখে ফেলা যাক। obj.key পড়লে:

1. obj-এর own property-গুলোতে key আছে? থাকলে সেটির মান (getter হলে getter চালিয়ে ফল) — শেষ।
2. না থাকলে p = obj-এর [[Prototype]]. p যদি null হয় → ফল undefined.
3. না হলে p-এর own property-তে খোঁজা; না পেলে p-এর prototype — এভাবে শিকল ধরে।
4. সাধারণ object-এর শিকল প্রায় সবসময় শেষ হয় Object.prototype → null-এ।

নিচে একটি Product পণ্য (অংশ ৫-এ বানাব) দিয়ে p.toString() ডাকলে কী হয়, ধাপে ধাপে দেখুন:

const p = new Product("চাল", 70);
p-এর own key: name, price
"toString" নেই → এক ধাপ ওপরে

Object.getPrototypeOf(p) === Product.prototype  // true
এখানে আছে: priceWithVat, constructor
"toString" নেই → আরও এক ধাপ ওপরে

Object.getPrototypeOf(Product.prototype) === Object.prototype  // true
toString পাওয়া গেল → খোঁজা শেষ

Object.prototype.toString.call(p)  // কার্যত এটিই ঘটে
ফল: "[object Object]"

p → Product.prototype → Object.prototype → null
ফল: undefined  // error নয়
p.discount() লিখলে → TypeError: p.discount is not a function

লেখা শিকল ধরে ওপরে যায় না — shadowing

পড়া আর লেখার নিয়ম অসমান, আর এটিই অনেক বাগের উৎস। rice.priceWithVat = … লিখলে engine prototype-এর method বদলায় না; বরং rice-এর নিজের ঘরে একই নামের নতুন property তৈরি করে। পরের বার পড়লে খোঁজা প্রথম ধাপেই থেমে যায়, তাই prototype-এর method আড়ালে পড়ে — একে বলে property shadowing. (পর্ব ০৭-এর variable shadowing-এর মতোই ধারণা, শুধু scope-এর বদলে prototype chain-এ।)

1const rice = new Product("চাল", 70);2const oil = new Product("তেল", 180);3rice.priceWithVat = () => 0;4console.log(rice.priceWithVat(), oil.priceWithVat());5delete rice.priceWithVat;6console.log(rice.priceWithVat());

দুটি সূক্ষ্ম ব্যতিক্রম জানা থাকা ভালো, কারণ ইন্টারভিউতে আসে:

• শিকলে setter থাকলে সেটি চলে। Prototype-এ যদি price-এর জন্য একটি setter থাকে, তাহলে rice.price = 90 নতুন own property বানায় না — setter-টি চলে, this = rice. যাচাই বা রূপান্তরের নিয়ম এভাবেই ভাগ করা যায়; class-এর set (পর্ব ২৬) ঠিক এভাবে কাজ করে।
• শিকলে read-only property থাকলে লেখা ব্যর্থ। Prototype-এর একই নামের property যদি writable: false হয়, তাহলে own property-ও তৈরি হয় না — সাধারণ script-এ চুপচাপ, strict mode-এ TypeError. এই আচরণকে কেউ কেউ “override mistake” বলেন; কেউ Object.prototype freeze করলে এটি হঠাৎ দেখা দেয়।

for…in বনাম Object.keys — শিকল কে দেখে

পর্ব ১২ আর ১৪-এ বলা হয়েছিল, for…in inherited property-ও দেখায়। এখন কারণটি পরিষ্কার: for…in পুরো শিকল ঘুরে সব enumerable string key তোলে, আর Object.keys শুধু own enumerable key. Built-in method-গুলো (যেমন toString) enumerable নয় বলে সাধারণত চোখে পড়ে না। কিন্তু Product.prototype.priceWithVat = function… লিখে বসানো method enumerable — সাধারণ = দিয়ে তৈরি সব property-র মতো। তাই for (const k in rice) দেবে name, price, priceWithVat; আর Object.keys(rice) দেবে শুধু [ 'name', 'price' ]. পর্ব ২৬-এর class-এর method স্বয়ংক্রিয়ভাবে non-enumerable — পুরোনো ধরনের তুলনায় class-এর একটি ছোট কিন্তু বাস্তব উন্নতি।

৫ · Constructor function আর new — একই ধরনের অনেক object

একটি দোকানে শত শত পণ্য। প্রতিটির জন্য হাতে Object.create আর property বসানো ক্লান্তিকর। ES2015-এর আগে (আর এখনো অনেক পুরোনো লাইব্রেরিতে) এর সমাধান ছিল constructor function: একটি সাধারণ function, যা নিয়ম অনুযায়ী বড় হাতের অক্ষর দিয়ে শুরু হয় আর new দিয়ে ডাকা হয়:

function Product(name, price) {      // নিয়ম: নাম বড় হাতের অক্ষরে
  this.name = name;                  // ডেটা → প্রতিটি object-এর নিজের
  this.price = price;
}
Product.prototype.priceWithVat = function () {   // আচরণ → prototype-এ, একবার
  return Math.round(this.price * 1.15);
};

const p = new Product("চাল", 70);
p.priceWithVat();                    // 81

new Product("চাল", 70) লেখার সময় আসলে চারটি কাজ হয়। এগুলো মুখস্থ রাখুন — বিশ্ববিদ্যালয়ের লিখিত পরীক্ষা থেকে front-end ইন্টারভিউ পর্যন্ত সবখানে আসে:

1function Product(name, price) {2  this.name = name;3  this.price = price;4}5Product.prototype.priceWithVat = function () { … };6const p = new Product("চাল", 70);7console.log(p.priceWithVat());

Method কোথায় রাখবেন — প্রতিটি object-এ, নাকি prototype-এ?

নতুনরা (আর AI-ও) প্রায়ই constructor-এর ভেতরেই method লেখে:

function ProductBad(name, price) {
  this.name = name;
  this.price = price;
  this.priceWithVat = function () {          // ❌ প্রতিটি object-এর জন্য নতুন function
    return Math.round(this.price * 1.15);
  };
}
const a = new ProductBad("চাল", 70), b = new ProductBad("ডাল", 120);
a.priceWithVat === b.priceWithVat;           // false — দুটি আলাদা function
// Product দিয়ে একই তুলনা → true — একটিই function

constructor property — prototype থেকে ফেরার পথ

প্রতিটি সাধারণ function-এর prototype object-এ শুরু থেকেই একটি property থাকে: Product.prototype.constructor === Product. একে বলে constructor property. যেহেতু সব পণ্য prototype থেকে ধার করে, p.constructor-ও Product দেয় — “কোন constructor আমাকে বানিয়েছে” জানার একটি সহজ (তবে নির্ভরযোগ্য নয়) উপায়। নির্ভরযোগ্য নয় কারণ এটি একটি সাধারণ, বদলানো যায় এমন property. বিশেষ করে Product.prototype = { … } লিখে পুরো prototype নতুন object দিয়ে বদলালে constructor হারিয়ে যায় (তখন শিকল ধরে Object পাওয়া যায়) — অংশ ৬-এ দেখবেন কীভাবে আবার বসাতে হয়।

৬ · instanceof, isPrototypeOf আর দুই constructor-এর মধ্যে উত্তরাধিকার

“এই object কি একটি পণ্য?” — প্রশ্নটির দুটি উত্তর-যন্ত্র আছে, আর দুটিই শিকল ধরে হাঁটে:

instanceof-এর নাম শুনে মনে হয় এটি “কোন class থেকে তৈরি” দেখে — আসলে দেখে শুধু শিকল। তাই Product.prototype পরে অন্য object দিয়ে বদলালে পুরোনো পণ্যগুলো হঠাৎ instanceof Product-এ false দেয়। আর Object.create(productMethods) দিয়ে তৈরি object-এর জন্য কোনো constructor নেই, তাই সেখানে isPrototypeOf লাগে: productMethods.isPrototypeOf(rice). আরও এক ধাপ গভীরে: ES2015 থেকে instanceof প্রথমে ডান পাশের object-এ Symbol.hasInstance method খোঁজে; থাকলে সেটিই উত্তর ঠিক করে, না থাকলে স্বাভাবিক শিকল-হাঁটা। এই Symbol-গুলোর গল্প পর্ব ২৮-এ।

দুই constructor-এর উত্তরাধিকার — ES2015-এর আগের পদ্ধতি

এবার একটি ডিজিটাল পণ্য — ই-বুক, যার দাম আর VAT-এর হিসাব সাধারণ পণ্যের মতোই, কিন্তু আছে ফাইলের আকার। আমরা চাই শিকল হোক: ebook → DigitalProduct.prototype → Product.prototype → Object.prototype. এই prototypal inheritance-এর জন্য দুটি কাজ লাগে: (১) parent constructor-কে নতুন object-এর ওপর ডাকা, যাতে name আর price বসে; (২) DigitalProduct.prototype-কে এমন object বানানো, যার prototype Product.prototype. সব একসাথে চালিয়ে দেখুন:

function Product(name, price) {
  this.name = name;
  this.price = price;
}
Product.prototype.priceWithVat = function () {
  return Math.round(this.price * 1.15);
};
const rice = new Product("চাল", 70);
const oil = new Product("তেল", 180);
console.log(rice.priceWithVat(), oil.priceWithVat());
console.log(rice.priceWithVat === oil.priceWithVat, Object.hasOwn(rice, "priceWithVat"));

function DigitalProduct(name, price, sizeMB) {
  Product.call(this, name, price);          // parent-এর ঘরগুলো এই object-এ
  this.sizeMB = sizeMB;
}
DigitalProduct.prototype = Object.create(Product.prototype);
DigitalProduct.prototype.constructor = DigitalProduct;
const ebook = new DigitalProduct("ই-বুক", 200, 5);
console.log(ebook.priceWithVat(), ebook instanceof Product, ebook.constructor.name);

rice.priceWithVat = () => 0;                 // shadowing: নিজের property তৈরি
console.log(rice.priceWithVat(), oil.priceWithVat(), Object.hasOwn(rice, "priceWithVat"));

লক্ষ করুন, DigitalProduct.prototype = new Product() লেখা পুরোনো একটি ভুল পদ্ধতি — এতে parent constructor অকারণে চলে, আর prototype-এ name: undefined-এর মতো আবর্জনা বসে। Object.create(Product.prototype) শুধু link তৈরি করে, কিছু চালায় না — ES5 এই কাজের জন্যই Object.create এনেছিল (ভাবনার প্রশ্ন ৩)। আর এত লাইনের এই পদ্ধতিই পর্ব ২৬-এ হয়ে যাবে মাত্র class DigitalProduct extends Product { constructor(…) { super(…); … } } — ভেতরে ঠিক একই শিকল।

৭ · Built-in chain — array, function, string আর built-in বদলানোর বিপদ

আপনি যে [1, 2, 3].map(…), greet.call(…) বা "abc".toUpperCase() লেখেন — এগুলো সবই একই ব্যবস্থা। প্রতিটি built-in ধরনের একটি prototype আছে, যেখানে তার method-গুলো থাকে। ধাপে ধাপে তিনটি শিকল পাশাপাশি দেখুন:

এবার শিকলটি কোড দিয়ে হেঁটে দেখি, আর অংশ ৩-এর প্রতিশ্রুতি মতো একটি বাক্যের শব্দ গুনি — সাধারণ {} আর Object.create(null) দুটো দিয়েই:

const nums = [1, 2, 3];
function chainOf(value) {
  const names = [];
  let p = Object.getPrototypeOf(value);
  while (p !== null) {
    names.push(p.constructor.name);
    p = Object.getPrototypeOf(p);
  }
  return names;
}
console.log(chainOf(nums), chainOf(chainOf), chainOf("abc"));
console.log(Object.hasOwn(nums, "map"), "map" in nums, Object.hasOwn(nums, "length"));

const words = "আম জাম আম constructor __proto__ আম".split(" ");
const plain = {};
const safe = Object.create(null);
for (const w of words) {
  plain[w] = (plain[w] ?? 0) + 1;
  safe[w] = (safe[w] ?? 0) + 1;
}
console.log(Object.keys(plain), typeof plain.constructor);
console.log(JSON.stringify(safe), "toString" in safe);

Built-in prototype বদলানো — কেন করবেন না

যেহেতু সব array Array.prototype থেকে ধার করে, সেখানে একটি method বসালে সব array সাথে সাথে তা পায়: Array.prototype.last = function () { return this[this.length - 1]; }. লোভনীয়, তাই না? একে বলে monkey patching, আর built-in-এর ক্ষেত্রে এটি প্রায় সবসময় খারাপ সিদ্ধান্ত:

• সংঘর্ষ: আপনার পাতায় দুটি লাইব্রেরি যদি একই নামে আলাদা আচরণের method বসায়, যেটি পরে লোড হয় সেটি জেতে — অন্যটি চুপচাপ ভেঙে যায়।
• ভবিষ্যৎ: ভাষা যদি পরে একই নামে method আনে (যেমন ES2022 আনল at), আপনার কোড আর মানক method — দুটির একটি ভুল আচরণ করে। ২০১৮ সালে ঠিক এ কারণে প্রস্তাবিত Array.prototype.flatten-এর নাম বদলে flat রাখতে হয়েছিল, কারণ MooTools নামের পুরোনো লাইব্রেরি ব্যবহার করা সাইট ভাঙছিল — ঘটনাটি “SmooshGate” নামে পরিচিত (ভাবনার প্রশ্ন ৫)।
• for…in দূষণ: = দিয়ে বসানো method enumerable, তাই পাতার সব for…in লুপে হঠাৎ last নামের একটি key দেখা দেয়।

একটিমাত্র বৈধ ব্যতিক্রম আছে: polyfill. পুরোনো browser-এ নেই এমন একটি মানক method, মানদণ্ডে লেখা হুবহু আচরণে যোগ করা — আর শুধু তখনই, যখন সেটি আগে থেকে নেই:

if (!Array.prototype.at) {                       // ১. আগে থেকে থাকলে হাত দেবেন না
  Object.defineProperty(Array.prototype, "at", {  // ২. non-enumerable, মানক নাম
    value(i) {                                    // ৩. specification-এর আচরণ
      const n = Math.trunc(i) || 0;
      const k = n >= 0 ? n : this.length + n;
      return k >= 0 && k < this.length ? this[k] : undefined;
    },
    writable: true, configurable: true,
  });
}

এটি একটি সরল উদাহরণ (আসল মানক at array-like object-এও কাজ করে)। বাস্তবে polyfill নিজে না লিখে core-js-এর মতো পরীক্ষিত লাইব্রেরি বা build tool (পর্ব ৪৬) দিয়ে যোগ করুন। আর যা মানক নয় — নিজের helper — তা লিখুন সাধারণ function হিসেবে: last(arr), arr.last() নয়।

৮ · পারফরম্যান্স — শিকল স্থির রাখুন

“প্রতিবার শিকল ধরে খুঁজতে হলে তো ধীর হওয়ার কথা” — যুক্তিসংগত প্রশ্ন। বাস্তবে আধুনিক engine খুব কমই আসলে হাঁটে। পর্ব ০৫-এর hidden class আর inline cache এখানে কাজ করে: কোনো জায়গায় (যেমন একটি লুপের ভেতরে p.priceWithVat()) প্রথমবার খোঁজার পরে engine মনে রাখে, “এই গঠনের object-এর জন্য priceWithVat পাওয়া যায় দুই ধাপ ওপরের ওই prototype-এ”। পরের হাজারবার সে সরাসরি সেখানে যায়। V8 prototype object-গুলোর জন্য আলাদা হিসাব রাখে, যাতে কেউ শিকলের কোনো prototype বদলালে সংশ্লিষ্ট মনে রাখা ফলগুলো বাতিল করা যায়।

এখান থেকেই ব্যবহারিক নিয়মগুলো আসে:

তবে মনে রাখুন: এগুলো engine-এর বাস্তবায়নের খুঁটিনাটি, ভাষার নিয়ম নয়। সাধারণ অ্যাপে কয়েক ধাপের শিকল কোনো সমস্যাই নয়। আগে পরিষ্কার কোড, তারপর DevTools-এ মেপে দেখে (পর্ব ৫৩) optimization — অনুমানে নয়।

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

AI টুল বিশাল পরিমাণ পুরোনো কোড আর ব্লগ পড়ে শিখেছে, যার বড় অংশ ২০১৫-এর আগের। তাই prototype-এর ক্ষেত্রে AI প্রায়ই পুরোনো অভ্যাস ফিরিয়ে আনে — কোড চলে, কিন্তু ধীর, ভঙ্গুর বা অনিরাপদ। সবচেয়ে সাধারণ ভুলগুলো:

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

• .prototype. দিয়ে কোনো built-in (Array, String, Object, Function) বদলানো হয়েছে কি না খুঁজেছি
• __proto__ আর setPrototypeOf খুঁজেছি; থাকলে তৈরির সময়ের পদ্ধতিতে বদলেছি
• Constructor-এর ভেতরে this.x = function আছে কি না দেখেছি — method prototype-এ বা class-এ সরিয়েছি
• উত্তরাধিকারে Object.create(Parent.prototype) আর constructor ঠিক আছে কি না (বা extends) দেখেছি
• for…in থাকলে inherited enumerable property আসতে পারে কি না ভেবেছি
• বাইরের key দিয়ে লেখা বা deep merge থাকলে prototype pollution-এর প্রতিরক্ষা আছে কি না দেখেছি
• ব্যাখ্যায় “object-এর prototype property” জাতীয় গুলিয়ে ফেলা কথা থাকলে Object.getPrototypeOf দিয়ে নিজে যাচাই করেছি