مفهوم برنامه نویسی شی گرا و کلاس در جاوا اسکریپت

کلاس ها در جاوا اسکریپت نوعی از function می باشند که به جای عبارت function از class برای تعریف آنها استفاده می شود. مفهوم کلاس ها در ES6 به زبان برنامه نویسی جاوا اسکریپت اضافه گردید. Propertyهای کلاس ها در جاوا اسکریپت می بایست درون متد سازنده آن (constructor) تعریف شوند.

نحوه استفاده

تعریف کلاس ها در جاوا اسکریپت به شکل زیر می باشد:

<script>
  class Student{
    constructor(id,name,age){
      this.Id = id;
      this.Name = name;
      this.Age = age;
    }

  }
</script>

در این مثال کلاسی به نام Student به همراه سه مشخصه تعریف شده است.

برای پیاده سازی عملیات مربوط به یک کلاس می بایست برای آن متد تعریف نمود. متدها همان توابع (function) عضو کلاس می باشند.

<script>
  class Student{
    constructor(id,name,age){
      this.Id = id;
      this.Name = name;
      this.Age = age;
    }
    showInfo(){
      alert("the student information: " + this.Id+", "+this.Name +", " + this.Age);
    }
  }
</script>

برای استفاده از کلاس تعریف شده در جاوا اسکریپت همانند سایر زبان های برنامه نویسی می بایست از آن یک نمونه ساخت. به نمونه ساخته شده از یک کلاس، object گفته می شود. توسط نمونه ساخته شده می توان به اعضای کلاس دسترسی داشت.

<script>
  class Student{
    constructor(id,name,age){
      this.Id = id;
      this.Name = name;
      this.Age = age;
    }
    showInfo(){
      alert("the student information: " + this.Id+", "+this.Name +", " + this.Age);
    }
  }
  student1 = new Student(101,"Beno Academy",26);
  student1.showInfo();
</script>

متدهای static

متدهای static، متدهایی می باشند که دسترسی به آنها توسط نام کلاس امکان پذیر است نه object ساخته شده!

<script>
  class Student{
    constructor(id,name,age){
      this.Id = id;
      this.Name = name;
      this.Age = age;
    }
    showInfo(){
      alert("the student information: " + this.Id+", "+this.Name +", " + this.Age);
    }
    static sayHello(){
      alert("Hello, welcome to Beno Academy");
    }
  }
  Student.sayHello();
</script>

متدهای static بین تمام نمونه های ساخته شده از کلاس بصورت مشترک استفاده می شوند زیرا تنها یکبار به آنها حافظه اختصاص داده می شود.

ارث بری

یکی از پرکاربردترین قابلیت های برنامه نویسی شی گرا، ارث بری می شود که در جاوا اسکریپت توسط دستور extends قابل استفاده می شود. هنگامی که یک کلاس از کلاسی دیگر ارث بری دارد، ویژگی ها و متدهای کلاس پایه (کلاس اولیه)، در کلاس ثانویه (کلاس مشتق شده) قابل استفاده خواهد بود.

<script>
  class A{
    constructor(){

    }
  }
  class B extends A(){
    constructor(){
   
    }
  }
</script>

در کدهای فوق، A کلاس پایه و B کلاس مشتق شده می باشد.

استفاده از قابلیت ارث بری تأثیر بسزایی در پیاده سازی پروژه های واقعی و پیچیده و کاهش حجم کد به همراه خواهد داشت و تسلط به این موضوع جزء ضروریات برنامه نویسی می باشد.

مثال: قصد داریم محصولات یک فروشگاه اینترنتی را با استفاده از مفاهیم کلاس و ارث بری پیاده سازی کنیم. در این فروشگاه محصولات متفاوتی از جمله مانیتور، لپ تاپ، موبایل و ... وجود دارد. برای بهینه بودن کدها می توان ویژگی ها مشترک را در یک کلاس قرار داد و سایر کلاس ها علاوه بر ارث بری از کلاس پایه، ویژگی منحصر بفرد خود را نیز داشته باشند.

در اولین مرحله باید کلاس Product را ایجاد نماییم. در کلاس Product دو ویژگی برای برند و قیمت که بین تمامی محصولات مشترک می باشند قرار می دهیم.

class Product{
  constructor(brand,price){
    this.Brand = brand;
    this.Price = price;
  }
}

پس از ساخت کلاس Product می توان کلاسی مانند Monitor را ایجاد کرد که علاوه بر برند و قیمت، دارای خاصیت رزولوشن نیز می باشد.

class Monitor extends Product{
  constructor(brand, price, resolution){
    super(brand,price);
    this.Resolution = resolution;
  }
  showInfo(){
    alert("Monitor: " + this.Brand + ", " + this.Price + ", " + this.Resolution);
  }
}

در constructor کلاس های مشتق شده برای مقدار دهی کلاس پایه از متد super استفاده می شود.

super(brand,price);

کلاس دیگری به نام Mobile می توان ایجاد نمود که علاوه بر ارث بری از کلاس Product، خاصیت OS را نیز داشته باشد.

class Mobile extends Product{
  constructor(brand, price, os){
    super(brand,price);
    this.OS = os;
  }
  showInfo(){
    alert("Mobile: " + this.Brand + ", " + this.Price + ", " + this.OS);
  }
}

حال با ساخت نمونه از کلاس های ایجاد شده می توان اطلاعات محصولات مختلف را داشت.

montor1 = new Monitor("HP","430","4K");
montor2 = new Monitor("ASUS","450","4K");
mobile1 = new Mobile("Apple","830","ios");
mobile2 = new Mobile("Samsung","810","android");
montor1.showInfo();
mobile1.showInfo();

کد کامل صفحه به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno academy | Javascript</title>
  </head>
  <body>
    <script>
      class Product {
        constructor(brand, price) {
          this.Brand = brand;
          this.Price = price;
        }
      }

      class Monitor extends Product {
        constructor(brand, price, resolution) {
          super(brand, price);
          this.Resolution = resolution;
        }
        showInfo() {
          alert("Monitor: " + this.Brand + ", " + this.Price + ", " + this.Resolution);
        }
      }

      class Mobile extends Product {
        constructor(brand, price, os) {
          super(brand, price);
          this.OS = os;
        }
        showInfo() {
          alert("Mobile: " + this.Brand + ", " + this.Price + ", " + this.OS);
        }
      }
      montor1 = new Monitor("HP", "430", "4K");
      montor2 = new Monitor("ASUS", "450", "4K");
      mobile1 = new Mobile("Apple", "830", "ios");
      mobile2 = new Mobile("Samsung", "810", "android");
      montor1.showInfo();
      mobile1.showInfo();
    </script>
  </body>
</html>