8.7 Class (ক্লাস)

 

Class হল অব্জেক্ট তৈরী করার টেম্পলেট। Class ডাটা এবং কোডকে Encapsulate করে। সহজ ভাষায় class এমন একটি টেমপ্লেট যেটি অনেকগুলো ভ্যারিয়েবল এবং ফাংশন দিয়ে তৈরী। 

জাভাস্ক্রিপ্ট একটি প্রোটোটাইপ বেসড ল্যাঙ্গুয়েজে। জাভাস্ক্রিপ্টে প্রতিটি অবজেক্টে [[Prototype]] নামে একটা হিডেন প্রোপার্টি থাকে যেগুলো অবজেক্ট প্রোপার্টি এবং মেথডকে এক্সটেন্ড করতে ব্যবহৃত হয়। class প্রথম জাভাস্ক্রিপ্টে আসে ES6 আসার পর। জাভাস্ক্রিপ্টে class নতুন কোনো functionality নিয়ে না আসলেও প্রোটোটাইপ এবং ইনহেরিট্যান্স এর উপর “syntactical sugar” হিসেবে কাজ করে যা cleaner এবং maintainable কোড লিখতে সাহায্য করে। 

constructor function :

// constructor function

function Person () {
    this.name = 'John',
    this.age = 23
}


// create an object
const person1 = new Person()

function কীওয়ার্ড এর পরিবর্তে আমরা class কীওয়ার্ড ব্যবহার করতে পারি। 

class এর প্রোপার্টিস constructor ফাংশন এসাইন  হয়।

// creating a class

class Person {
  constructor(name) {
    this.name = name;
  }
}
// creating an object

const person1 = new Person('John');
const person2 = new Person('Jack');

console.log(person1.name); // John
console.log(person2.name); // Jack

এখানে person1 এবং person2 person ক্লাসের অবজেক্ট।

জাভাস্ক্রিপ্ট class এ মেথড ডিফাইন করা খুব সহজ। মেথডের নামের শেষে () দিয়ে মেথড ডিক্লেয়ার করা হয়।

class Person {
    constructor(name) {
       this.name = name;
    }
    // defining method
    greet() {
        console.log(`Hello ${this.name}`);
    }
}

let person1 = new Person('John');

// accessing property
console.log(person1.name); // John

// accessing method
person1.greet(); // Hello John

 

জাভাস্ক্রিপ্টে getter মেথড অব্জেক্টের ভ্যালু get এবং setter মেথড অবজেক্টের ভ্যালু set করতে ব্যবহৃত হয়.

class Person {
    constructor(name) {
        this.name = name;
    }

    // getter
    get personName() {
        return this.name;
    }

    // setter
    set personName(x) {
        this.name = x;
    }
}

let person1 = new Person('Jack');
console.log(person1.name);           // Jack

// changing the value of name property
person1.personName = 'Sarah';
console.log(person1.name);          // Sarah

Hoisting:

class ব্যাবহারের পূর্বে  অবশই ডিফাইন করতে হবে । জাভাস্ক্রিপ্টের অন্য ফাংশন এবং ডিক্লারেশনের মত class hoisted নয় । 

// accessing class
const p = new Person(); // ReferenceError

// defining class
class Person {
  constructor(name) {
    this.name = name;
  }
}

উপরের কোড ব্লকটি এরর থ্রো করবে কারণ আমরা ডিফাইন এর পূর্বে একসেস করার চেষ্টা করতেসি।

class এর  একটি গুরুত্বপূর্ণ ফীচার হল আমরা ক্লাসকে extend করে নতুন class তৈরী করতে পারি যা প্যারেন্ট class এর সব ফীচার ইনহেরিট করে।  এতে করে কোড রেপিটেশন অনেক কম হয়। নতুন class এ কোনো অতিরিক্ত ফীচার দরকার হলে তাও অ্যাড করা সম্ভব।

// Initializing a class

class Hero {
   constructor(name, level) {
     this.name = name;
     this.level = level;
   }
   // Adding a method to the constructor

   greet() {
     return `${this.name} says hello.`;
    }
}




// Creating a new class from the parent

class Mage extends Hero {
  constructor(name, level, spell) {
     // Chain constructor with super
     super(name, level);

     // Add a new property
     this.spell = spell;
   }
}

 

 

 
উদাহরন
  • ক্লাস ডিফাইনের আরেকরকম উপায় হলো ক্লাস এক্সপ্রেশন। যদি ক্লাসের কোনো নাম না দেয়া থাকে তাহলে এইটা name প্রপার্টি দিয়ে এক্সেস করা যাবে।

let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"
  • ক্লাস এক্সপ্রেশনে ক্লাসের নাম দিয়েও আমরা ক্লাস ডিফাইন করতে পারি। 

let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"
  • আমরা চাইলে ক্লাসের মধ্যে একই সাথে getter এবং মেথড ব্যবহার করতে পারি। 

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100
  • জাভাস্ক্রীপ্টে static কিওয়ার্ড ব্যবহার করে ক্লাসের static মেথড অথবা প্রোপার্টি ডিফাইন করতে পারি। static মেথড অথবা প্রোপার্টি ক্লাসের instance তৈরী করা ছাড়াই এক্সেস করা যায়।

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755
  • জাভাস্ক্রিপ্টে extends কিওয়ার্ড ব্যবহার করে একটি ক্লাসের চাইল্ড ক্লাসতৈরী করা হয়।

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

 

এসো নিজে করি
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?

const p = new Person();
console.log(p)

class Person {
  constructor(name) {
    this.name = name;
  }
}
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?
class Greeting  {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static hello  = "Point";
}

console.log(Greeting.hello);
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?
let Triangle  = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Triangle.name);
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?
class Car  {
  constructor(name) {
    this.name = name;
  }

  horn() {
    console.log(`${this.name} makes horn .`);
  }
}

class Ford  extends Car  {
  constructor(name) {
    super(name);
  }

  break() {
    console.log(`${this.name} breaks.`);
  }
}

let d = new Ford('Explorer');
d.break();
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?
class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}