کلاس ها در ES6 (ES6 Classes)

در این صفحه درباره کلاس ها در ES6 حرف می زنیم. کلاس ها در ES6 (ES6 Classes) کمک می کنند جاوااسکریپت مرتب تر شود. مثل وقتی برای هر دانش آموز یک فرم ثابت داری. فقط مقدارها عوض می شود.

کلاس در ES6 دقیقا چیست؟

کلاس (Class) در ES6 در واقع یک نوع تابع (Function) است. اما به جای کلمه function از کلمه class استفاده می کنیم. ویژگی ها داخل متد سازنده (Constructor) تعریف می شوند. سازنده یعنی تابعی که موقع ساخت شیء، خودش خودکار اجرا می شود.

در کلاس ها در ES6 معمولا نام کلاس را با حرف بزرگ شروع می کنیم. مثلا Car به جای car. این یک قرارداد نام گذاری است. مثل این که اسم درس را با حرف بزرگ شروع می کنی.

یک کلاس ساده در ES6

در مثال منبع، یک کلاس ساده به نام Car ساخته شده است. این کلاس یک سازنده دارد که نام ماشین را می گیرد و آن را در brand ذخیره می کند.

class Car {
  constructor(name) {
    this.brand = name;
  }
}

مشاهده در ادیتور

نکته: this داخل کلاس یعنی همین شیء فعلی. مثل وقتی می گویی «دفتر خودم». اینجا brand یعنی ویژگی برند همین ماشین.

ساخت شیء از روی کلاس در ES6

حالا با استفاده از کلاس Car می توانیم شیء بسازیم. شیء یعنی یک نمونه واقعی از آن الگو. مثل یک ماشین واقعی که از روی نقشه ساخته شده است.

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

مشاهده در ادیتور

اینجا با کلمه new یک شیء جدید می سازیم. new یعنی «از روی این الگو بساز». mycar حالا یک ماشین با برند Ford است.

متد در کلاس های ES6

متد (Method) یعنی تابعی که داخل کلاس تعریف می شود. متد مثل کاری است که شیء بلد است انجام دهد. مثلا ماشین می تواند خودش را معرفی کند.

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return "I have a " + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

مشاهده در ادیتور

در این مثال متد present یک رشته برمی گرداند. یعنی یک متن. ما متد را با mycar.present() صدا می زنیم. مثل وقتی روی یک دکمه در بازی کلیک می کنی تا کاری انجام شود.

ارث بری در کلاس ها در ES6

ارث بری (Inheritance) یعنی یک کلاس از کلاس دیگر ویژگی بگیرد. در کلاس ها در ES6 برای ارث بری از کلمه extends استفاده می کنیم. این کار شبیه این است که بگویی «این کلاس جدید همه ویژگی های قبلی را هم داشته باشد».

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return "I have a " + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }

  show() {
    return this.present() + ", it is a " + this.model;
  }
}

const mycar = new Model("Ford", "Mustang");
mycar.show();

مشاهده در ادیتور

کلاس Model از کلاس Car ارث بری می کند. یعنی brand و متد present را به ارث می برد. متد show از present کمک می گیرد و متن کامل تری برمی گرداند.

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

چطور کلاس ها در ES6 را مرحله ای تمرین کنیم؟

برای قوی شدن در کلاس ها در ES6 بهتر است مرحله ای تمرین کنی. مثل تمرین سوال های ریاضی، اما اینجا برای کد جاوااسکریپت.

1. یک کلاس ساده مثل Car بساز و فقط سازنده بنویس.
2. برای کلاس یک متد ساده اضافه کن و خروجی را در کنسول ببین.
3. یک کلاس فرزند با extends بساز و با super ویژگی های پدر را بگیر.

اگر دوست داشتی مطلب بیشتر بخوانی، بخش کلاس های جاوااسکریپت را هم ببین. برای مثال: JavaScript Classes – W3Schools. این بخش خارج از ری اکت است، اما همان مفهوم کلاس را توضیح می دهد.

ارتباط کلاس ها در ES6 با سایر بخش های آموزش

در صفحه آشنایی با ES6 (ES6) دیدی که ES6 چند ویژگی مهم دارد. کلاس ها در ES6 یکی از اصلی ترین آن ها هستند. این کلاس ها در بسیاری از مثال های جاوااسکریپت و ری اکت دیده می شوند.

وقتی کلاس ها در ES6 را خوب بلد باشی، فهم ارث بری و ساختار کد برایت راحت تر می شود. بعدا کنار این مبحث می توانی سراغ توابع پیکانی و بقیه امکانات ES6 بروی. آن ها در فایل های دیگر همین مجموعه توضیح داده شده اند.

جمع بندی سریع

• کلاس ها در ES6 روشی شیک برای تعریف الگو هستند.
• سازنده در کلاس موقع ساخت شیء خودکار اجرا می شود.
• متدها رفتار شیء را تعریف می کنند، مثل present و show.
• ارث بری با extends و super کد تکراری را کم می کند.