How JavaScript Inheritance Works – Inheritance vs ES6 Classes

Prototypal Inheritance!
JavaScript-এ Object-Oriented Programming (OOP) অন্য যেকোনো রেগুলার ল্যাঙ্গুয়েজ (যেমন Java, C++, বা Python) থেকে সম্পূর্ণ আলাদা।

তুমি যদি ফ্রন্টএন্ড ডেভেলপমেন্ট নিয়ে সিরিয়াসলি কাজ করো, বিশেষ করে মডার্ন ফ্রেমওয়ার্কগুলোতে, তবে নিশ্চয়ই খেয়াল করেছো যে এখানে ইনহেরিটেন্সের কনসেপ্টটা বেশ ট্রিকি।

২০১৫ সালে ES6-এ class কি-ওয়ার্ড আসার পর অনেকেই ভেবেছিল JavaScript হয়তো ট্র্যাডিশনাল অবজেক্ট-ওরিয়েন্টেড ল্যাঙ্গুয়েজ হয়ে গেলো। কিন্তু আসল সত্যিটা কী?

চলো আজ ফ্রেমওয়ার্কের বাইরে গিয়ে Vanilla JavaScript-এর আন্ডার-দ্য-হুড ইঞ্জিন কীভাবে কাজ করে, তার একদম গভীরে প্রবেশ করি।

The Core Concept: What is Prototypal Inheritance?

সহজ কথায়, JavaScript-এ সবকিছুই মূলত Object। যখন তুমি একটি অবজেক্ট থেকে আরেকটি অবজেক্টে কোনো প্রপার্টি বা মেথড শেয়ার করতে চাও, তখন JS ইঞ্জিন কোনো “Class” কপি করে নতুন ব্লুপ্রিন্ট বানায় না।

এর বদলে, সে সরাসরি একটি অবজেক্টকে আরেকটি অবজেক্টের সাথে লিঙ্ক করে দেয়। এই লিঙ্কিং মেকানিজমটিকেই বলা হয় Prototype Chain।

ধরে নাও, তোমার কাছে Animal নামের একটি মেইন অবজেক্ট আছে।

তুমি যখন নতুন একটি Dog অবজেক্ট বানাবে এবং Animal-এর ফিচারগুলো (যেমন হাঁটা বা খাওয়া) সেখানে পেতে চাইবে, তখন JS ইঞ্জিনের আন্ডার-দ্য-হুড Dog-এর ইন্টারনাল [[Prototype]] (যাকে কোডে __proto__ বলা হয়) সরাসরি Animal-কে পয়েন্ট করে রাখবে।

How the JS Engine Reads It:

• তুমি যখন Dog.bark() কল করো, JS ইঞ্জিন প্রথমে Dog অবজেক্টের নিজস্ব প্রোপার্টির ভেতরে মেথডটি খোঁজে।
• যদি সেখানে না পায়, তখন সে হাল ছেড়ে দেয় না। সে চেইন ধরে তার Prototype-এ (অর্থাৎ Animal অবজেক্টে) গিয়ে খুঁজতে থাকে।
• এভাবে সে গ্লোবাল Object.prototype পর্যন্ত যায়। এই পুরো প্রসেসটিকেই বলা হয় Prototypal Inheritance।

The ES6 Illusion: Syntactic Sugar Explained

ES6 (ECMAScript 2015) রিলিজ হওয়ার পর JavaScript-এ class, constructor, extends, এবং super কি-ওয়ার্ডগুলোর আগমন ঘটে।

এটা দেখে অন্যান্য ল্যাঙ্গুয়েজ থেকে আসা ডেভেলপারদের জীবন অনেক সহজ হয়ে যায়, কারণ কোড দেখতে একদম ক্লিন এবং পরিচিত লাগতে শুরু করে।

কিন্তু আসল এবং সবচেয়ে গুরুত্বপূর্ণ সত্যটা হলো: JavaScript-এ ট্র্যাডিশনাল ক্লাসের কোনো অস্তিত্বই নেই!

ES6 Classes হলো মূলত একটি “Syntactic Sugar”। অর্থাৎ, এটি শুধু কোড লেখার এবং পড়ার একটি সুন্দর মোড়ক মাত্র।

তুমি যখন class লিখে কোড রান করো, বিহাইন্ড-দ্য-সিনে JS ইঞ্জিন সেই ক্লাসগুলোকেও ভেঙে সেই পুরোনো Prototypal Inheritance-এই কনভার্ট করে এক্সিকিউট করে।

Code Comparison: Prototypal Approach vs Modern ES6 Syntax

বিষয়টি আরও ক্লিয়ার করার জন্য চলো একই কাজ দুইভাবে করে দেখি। আমরা একটি Animal তৈরি করবো এবং সেখান থেকে Dog ইনহেরিট করবো।

1. The Old Way (Prototypal Inheritance):

এখানে আমরা ফাংশন এবং প্রোটোটাইপ চেইন ম্যানুয়ালি ব্যবহার করবো।

JavaScript

// Parent Constructor
function Animal(name) {
  this.name = name;
}

// Adding method to prototype
Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

// Child Constructor
function Dog(name, breed) {
  Animal.call(this, name); // Inheriting properties
  this.breed = breed;
}

// Linking Prototypes (The Magic!)
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(this.name + " says woof!");
};

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.eat();  // Output: Buddy is eating.
myDog.bark(); // Output: Buddy says woof!

2. The Modern Way (ES6 Classes):

একই কাজ মডার্ন সিনট্যাক্সে কতোটা ক্লিন দেখায়, সেটা খেয়াল করো।

JavaScript

// Parent Class
class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

// Child Class using 'extends'
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Inheriting properties
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} says woof!`);
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.eat();  // Output: Buddy is eating.
myDog.bark(); // Output: Buddy says woof!

মজার ব্যাপার হলো, তুমি যদি typeof Dog কনসোলে চেক করো, দেখবে উত্তর আসছে "function"! কারণ ক্লাস আসলে স্পেশাল ধরনের ফাংশন ছাড়া আর কিছুই না।

Head-to-Head Comparison: Prototype vs Class

ফিচার	Prototypal Inheritance	ES6 Classes
কোডিং স্টাইল	ফাংশন এবং Object.create() ব্যবহার করে ম্যানুয়ালি চেইন তৈরি করতে হয়।	class, extends, super ব্যবহার করে খুব সহজেই লেখা যায়।
আন্ডার-দ্য-হুড	এটিই JavaScript-এর নিজস্ব এবং নেটিভ বিহেভিয়ার।	এটি Prototypal প্যাটার্নের উপর তৈরি একটি লেয়ার বা “Syntactic Sugar”।
ডেভেলপার এক্সপেরিয়েন্স	একটু ট্রিকি, বুঝতে সময় লাগে। অনেক বয়লারপ্লেট কোড লিখতে হয়।	ট্র্যাডিশনাল OOP ব্যাকগ্রাউন্ড থেকে আসা ডেভেলপারদের জন্য খুবই ক্লিন ও ইউজার-ফ্রেন্ডলি।
Hoisting	ফাংশন ডিক্লারেশন হোইস্টেড (Hoisted) হয়, তাই আগে কল করলেও কাজ করে।	ক্লাস ডিক্লারেশন হোইস্টেড হয় না (ReferenceError দিবে), তাই আগে ডিফাইন করতে হয়।

Performance and Memory Management: Why It Matters

তুমি যখন বড় কোনো ওয়েব অ্যাপ্লিকেশন (যেমন React বা Next.js দিয়ে তৈরি কোনো ড্যাশবোর্ড) বানাচ্ছো, তখন পারফরম্যান্স খুব ম্যাটার করে।

Prototypal চেইনের সবচেয়ে বড় সুবিধা হলো মেমরি এফিশিয়েন্সি। তুমি যদি ১০০০ টা Dog অবজেক্ট বানাও, eat() বা bark() মেথডগুলো কিন্তু ১০০০ বার মেমরিতে তৈরি হয় না।

এগুলো শুধু মেইন প্রোটোটাইপে একবারই থাকে, আর সবগুলো অবজেক্ট শুধু সেই একটা মেথডকেই শেয়ার করে। ES6 ক্লাসও আন্ডার-দ্য-হুড যেহেতু প্রোটোটাইপই ব্যবহার করে, তাই এটিও সমানভাবে মেমরি অপ্টিমাইজড।

Which One Should You Use?

আধুনিক ওয়েব ডেভেলপমেন্ট এবং টিমের সাথে কাজ করার ক্ষেত্রে ES6 Classes ব্যবহার করাই হলো ইন্ডাস্ট্রি স্ট্যান্ডার্ড। এর সিনট্যাক্স অনেক ক্লিন, রিডেবল এবং বাগ-ফ্রি কোড লিখতে সাহায্য করে।

তবে, একজন সলিড জাভাস্ক্রিপ্ট ডেভেলপার হিসেবে Prototypal Inheritance কীভাবে কাজ করে তা জানা তোমার জন্য মাস্ট।

কারণ যখন কোনো থার্ড-পার্টি লাইব্রেরি বা লিগ্যাসি কোডবেস ডিব্যাগ করতে যাবে, তখন ক্লাসের এটার পেছনের আসল প্রোটোটাইপ চেইনটাই তোমাকে সল্যুশন বের করে দিবে।

Summary:

While JavaScript introduced class syntax in ES6 to mimic traditional Object-Oriented Programming, it remains a prototype-based language at its core. ES6 Classes are essentially “syntactic sugar” over JavaScript’s native Prototypal Inheritance. This means that when you write a class, the JS engine still links objects together using the hidden prototype chain (__proto__) under the hood. Ultimately, while the modern ES6 class syntax offers a cleaner and more readable way to structure your applications, mastering the underlying prototype mechanism is crucial for debugging complex issues and truly understanding how JavaScript operates.