this আর prototype-এর ছবি: call-এর সময় ঠিক হয়, chain বেয়ে পাওয়া যায়

Mitu একটা quiz app লিখছে। প্রতিটা player একটা object, যার একটা নাম আছে আর একটা method আছে, যেটা player-কে hello বলে। player.hello() লিখলে ঠিকঠাক চলে। তারপর ও method-টা পরে call করবে বলে একটা variable-এ রেখে দিল, আর greeting এল "Hi, undefined"। Method একটুও বদলায়নি। বদলেছে শুধু call করার ধরনটা।

এই module-এর অর্ধেকটাই এই একটা চমক। বাকি অর্ধেক হলো Module 8-এর একটা প্রশ্ন: {}-এর toString এল কোথা থেকে, কেউ তো লেখেনি? দুটো উত্তরই ছোট। this ঠিক হয় function call হওয়ার মুহূর্তে। আর যে property object-এ নেই, সেটা খোঁজা হয় prototype নামের কয়েকটা object-এর একটা chain-এ।

যে method নিজের object ভুলে যায়

Method হলো এমন একটা function, যেটা কোনো object-এর property হিসেবে রাখা। ভেতরে this শব্দটা দিয়ে method নিজের object-এর কাছে পৌঁছায়, যাতে this.name পড়তে পারে। এই যে Mitu-র player, আর ওর দুটো call।

const player = {
  name: "Rafi",
  hello() {
    return "Hi, " + this.name;
  },
};
console.log(player.hello());
const hello = player.hello;
console.log(hello());
console.log(hello === player.hello);

Hi, Rafi
Hi, undefined
true

শেষ লাইন দেখাচ্ছে function একটাই। তবু দ্বিতীয় call-এ নামটা হারিয়ে গেল। hello() হিসেবে call করার সময় dot-এর সামনে কিছু ছিল না, তাই this আর player থাকেনি। এই file-এ this হয়ে গেছে global object, যার কোনো name নেই। Lesson 02 দেখাবে strict code-এ এর বদলে আসে undefined, আর তখন call-টা crash করে।

this ঠিক হয় call-এর সময়

এক লাইনে নিয়মটা হলো: call-এর মুহূর্তে dot-এর সামনে যে object, সেটাই this। Function কোথায় লেখা হয়েছিল, তাতে কিছু যায় আসে না। কার হাতে আছে, তাতেও না।

function describe() {
  return this.name + " has " + this.score + " points";
}
const rafi = { name: "Rafi", score: 7, describe };
const nadia = { name: "Nadia", score: 9, describe };
console.log(rafi.describe());
console.log(nadia.describe());
console.log(rafi.describe === nadia.describe);

Rafi has 7 points
Nadia has 9 points
true

Function একটা, object দুটো। rafi.describe() চালায় rafi-কে this বানিয়ে, আর nadia.describe() ঠিক একই function চালায় nadia-কে this বানিয়ে। তাই this অনেকটা একটা parameter-এর মতো, যেটা তুমি পাঠাও dot কোথায় বসালে তা দিয়ে। কোন কোন ভাবে call this ঠিক করে, তার পুরো list আছে Lesson 02-এ।

প্রতিটা object-এর একটা prototype আছে

এবার দ্বিতীয় প্রশ্ন। Module 8-এ দেখেছ "toString" in {} হলো true, অথচ Object.hasOwn({}, "toString") হলো false। Object-টা toString-এর মালিক না। ও সেখানে পৌঁছায় নিজের prototype-এর মাধ্যমে: আরেকটা object-এর দিকে একটা লুকানো link।

const empty = {};
const proto = Object.getPrototypeOf(empty);
console.log(proto === Object.prototype);
console.log(Object.hasOwn(empty, "toString"));
console.log(Object.hasOwn(proto, "toString"));
console.log(Object.getPrototypeOf(proto));

true
false
true
null

Object.getPrototypeOf(o) সেই object-টা দেয়, যার দিকে o-এর link। সাধারণ object হলে সেটা Object.prototype, যার নিজের আছে toString আর আরও কয়েকটা method। Object.prototype-এর link কোথাও যায় না: তার prototype হলো null। প্রতিটা chain শেষ হয় এখানেই।

খোঁজা chain বেয়ে ওঠে

o.key পড়লে JavaScript আগে দেখে key-টা o-এর নিজের কি না। না হলে দেখে o-এর prototype-এ, তারপর সেই object-এর prototype-এ, এভাবে চলতে থাকে। যে object প্রথম key-টার মালিক, সেখানেই থামে। null-এ পৌঁছে গেলে উত্তর undefined। Link-এর এই পথটাই prototype chain।

Chain তুমি নিজেও বানাতে পারো Object.create(p) দিয়ে, যেটা একটা নতুন খালি object বানায়, যার prototype হলো p।

const game = { theme: "light", sound: "on" };
const team = Object.create(game);
team.theme = "dark";
const player = Object.create(team);
player.name = "Rafi";
console.log(player.name, player.theme, player.sound);
console.log(Object.hasOwn(player, "theme"));
console.log(player.speed);

Rafi dark on
false
undefined

player.name পাওয়া যায় player-এর নিজের ভেতরেই। player.theme player-এ নেই, তাই খোঁজা ওঠে team-এ, আর সেখানে পায় "dark"। Game-এর "light" পর্যন্ত কখনো পৌঁছায় না, কারণ team-এর value সেটাকে shadow করে, মানে ঢেকে দেয়। player.sound ওঠে দুই ধাপ। player.speed উঠে যায় একদম শেষে, আর দেয় undefined।

লেখা কখনো ওপরে ওঠে না

পড়ার সময় chain বেয়ে ওঠা হয়। লেখার সময় হয় না। o.key = v assign করলে key-টা বসে o-এর নিজের ভেতরে, prototype-এ আগে থেকে ওই key থাকলেও।

const defaults = { volume: 5 };
const settings = Object.create(defaults);
console.log(settings.volume);
settings.volume = 9;
console.log(settings.volume, defaults.volume);
console.log(Object.keys(settings));

5
9 5
[ 'volume' ]

লেখার পরে settings-এর নিজের একটা volume হলো, যেটা defaults-এরটাকে ঢেকে দেয়। defaults-এ কেউ হাত দেয়নি, তাই যে object-গুলো ওর দিকে link করা, ওরা এখনো 5-ই পড়ে। এই কারণেই একটা prototype ভাগ করে নেওয়া নিরাপদ। (Chain-এ কোনো setter থাকলে সেটা একমাত্র ব্যতিক্রম, Lesson 02-এ দেখবে।)

Method থাকে prototype-এ

এবার দুটো অর্ধেক জোড়া লাগাও। অনেকগুলো object একটা prototype-এর দিকে link করতে পারে, যেখানে method-গুলো রাখা। প্রতিটা object শুধু নিজের data রাখে। Method চলার সময় dot-এর সামনের object-টাই this, তাই একটা ভাগ করা method সব object-এর জন্যই কাজ করে।

const playerMethods = {
  hello() {
    return "Hi, " + this.name;
  },
  addPoint() {
    this.score += 1;
    return this.score;
  },
};
const rafi = Object.create(playerMethods);
rafi.name = "Rafi";
rafi.score = 0;
const lima = Object.create(playerMethods);
lima.name = "Lima";
lima.score = 4;
console.log(rafi.hello(), lima.hello());
console.log(rafi.addPoint(), lima.addPoint());
console.log(rafi.hello === lima.hello);

Hi, Rafi Hi, Lima
1 5
true

rafi.hello rafi-এর ভেতরে নেই। খোঁজা উঠে যায় playerMethods-এ, আর সেখানে পায়। তারপর rafi.hello() call-টা ওটাকে চালায় rafi-কে this বানিয়ে। Class-এর পেছনের পুরো কৌশল এটাই, Lesson 02 এর ওপরই দাঁড়াবে: class হলো ঠিক এই ভাগ করা prototype সুন্দর করে লেখার একটা উপায়।

নিচে দেখো একটা খোঁজা কীভাবে ওঠে, একবারে একটা object। Chain আঁকা আছে বাঁয়ের object থেকে ডানের Object.prototype পর্যন্ত। Object.prototype-এর box দেখায় তার অনেকগুলো নামের মাত্র তিনটা।

প্রতিটা খোঁজা আবার শুরু হয় বাঁয়ের rafi থেকে। name সাথে সাথে থামে। hello ওঠে এক link। toString ওঠে দুই link। speed উঠে যায় শেষ পর্যন্ত আর কিছুই পায় না, এই কারণেই না-থাকা property হলো undefined, কোনো error না।

obj.method()                   // inside method, this is obj: the object before the dot
const f = obj.method; f()      // same function, nothing before the dot: this is lost
Object.getPrototypeOf(o)       // the object o links to, or null at the end
Object.create(p)               // a new empty object whose prototype is p
o.key                          // read: o, then its prototype, then on up, else undefined
o.key = v                      // write: always on o itself, never up the chain
Object.hasOwn(o, "key")        // true only if o itself owns key

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
const ticketMethods = {
  label() {
    return this.buyer + " in seat " + this.seat;
  },
};
const tickets = [];
for (let i = 0; i < tokens.length; i += 2) {
  const t = Object.create(ticketMethods);
  t.buyer = tokens[i];
  t.seat = Number(tokens[i + 1]);
  tickets.push(t);
}
for (const t of tickets) console.log(t.label());
console.log(tickets.every((t) => Object.getPrototypeOf(t) === ticketMethods));
console.log(Object.keys(tickets[0]));

Nadia in seat 12
Kenji in seat 7
Sumon in seat 3
true
[ 'buyer', 'seat' ]

const defaults = { lang: "en", fontSize: 14 };
const mine = Object.create(defaults);
mine.lang = "bn";
console.log(mine.lang, mine.fontSize);
delete mine.lang;
console.log(mine.lang);
delete mine.fontSize;
console.log(mine.fontSize, defaults.fontSize);

bn 14
en
14 14

const counter = {
  count: 0,
  add() {
    this.count += 1;
    return this.count;
  },
};
const add = counter.add;
console.log(add());
console.log(counter.count);

NaN
0

const shared = { color: "red" };
const a = Object.create(shared);
const b = Object.create(shared);
a.color = "blue";
console.log(b.color);
console.log(shared.color);

red
red

const base = { kind: "base" };
const child = Object.create(base);
console.log(child.kind);
const broken = Object.create("base");
console.log(broken.kind);

base
TypeError: Object prototype may only be an Object or null: base

const top = { word: "top" };
const mid = Object.create(top);
const low = Object.create(mid);
mid.word = "mid";
delete low.word;
console.log(low.word, Object.hasOwn(low, "word"));

3
player 2 theme dark volume 7
team 2 volume 5 language bn
game 3 theme light language en speed normal
5
volume
theme
speed
toString
language

7 from player
dark from player
normal from game
missing
bn from team

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

3
Rafi Dhaka 12
Mitu Khulna 3
Kenji Sylhet 40

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Rafi Dhaka 12
Mitu Khulna 3
Kenji Sylhet 40
owned 3

7
make team base
make me team
set base theme light
set team theme dark
get me theme
del team theme
get me theme

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

dark
light

এরপর: this ঠিক করার প্রতিটা নিয়ম, আর class syntax, যেটা একই chain বানায়।