ارث در کلاس‌های JavaScript

ارث کلاس

برای ایجاد ارث کلاس، از extends کلیدواژه.

کلاس‌هایی که با استفاده از ارث کلاس ایجاد شده‌اند، تمام روشهای یک کلاس دیگر را ارث می‌برند:

مثال

یک کلاس به نام "Model" ایجاد کنید که روشهای کلاس "Car" را ارث می‌برد:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'من یک ' + this.carname + ' دارم;
  }
}
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

آزمایش کنید

super() روش به کلاس پدر اشاره می‌کند.

از طریق فراخوانی super() در روش، ما روش constructor پدر را فراخوانی کردیم و دسترسی به ویژگی‌ها و روش‌های پدر را به دست آوردیم.

وراثت برای کارایی مجدد کد بسیار مفید است: در هنگام ایجاد یک کلاس جدید، ویژگی‌ها و روش‌های موجود را استفاده می‌کند.

getter و setter

کلاس‌ها همچنین اجازه می‌دهند که از getter و setter استفاده کنید.

استفاده از getter و setter برای ویژگی‌های شما هوشمندانه است، به ویژه اگر می‌خواهید قبل از بازگرداندن یا تنظیم آن‌ها مقداری خاص انجام دهید.

برای اضافه کردن getter و setter به کلاس، از: get و set کلیدواژه.

مثال

getter و setter برای ویژگی "carname" ایجاد کنید:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

آزمایش کنید

توجه:حتی اگر getter یک روش باشد، هنگامی که می‌خواهید مقادیر ویژگی را دریافت کنید، از گوشه‌ها استفاده نکنید.

نام روش‌های getter/setter نمی‌تواند با نام ویژگی‌ها مشابه باشد، در این مثال به ترتیب: carname.

بسیاری از برنامه‌نویسان از کاراکتر زیرخط _ برای جدا کردن getter/setter از ویژگی‌های واقعی استفاده می‌کنند:

مثال

می‌توانید از کاراکتر زیرخط برای جدا کردن getter/setter از ویژگی‌های واقعی استفاده کنید:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

آزمایش کنید

برای استفاده از setter، از همان نحوه‌ی تنظیم مقادیر استفاده کنید، بدون استفاده از گوشه‌ها:

مثال

استفاده از setter برای تغییر نام خودرو به "Volvo":

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

آزمایش کنید

Hoisting

برخلاف توابع و سایر تعریف‌های JavaScript، تعریف کلاس‌ها بر اساس پیش‌تعریف (hoisting) نیستند.

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

مثال

// شما هنوز نمی‌توانید از این کلاس استفاده کنید.
// myCar = new Car("Ford")
// این باعث خطا می‌شود.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
// حالا می‌توانید از این کلاس استفاده کنید:
let myCar = new Car("Ford")

آزمایش کنید

توجه:برای سایر ادعاها، مانند توابع، استفاده از آن‌ها قبل از تعریف آن‌ها باعث خطا نمی‌شود زیرا رفتار پیش‌تعریف (hoisting) در JavaScript به عنوان پیش‌فرض است (تعریف‌ها به بالای کد منتقل می‌شوند).