آموزش برنامه نویسی جاوااسکریپت-جلسه بیست و هشتم

JS Classes

Class intro

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

Syntax

class ClassName {
  constructor() { … }
}

اسم کلاس با حرف بزرگ شروع می شود و حتما باید برای کلاس constructor بسازیم.

بعد خصوصیات رو فراخوانی می کنیم .

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

let myCar1 = new Car(“Ford”, 2014);
let myCar2 = new Car(“Audi”, 2019);

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

می توانیم برای کلاس متد هم بنویسیم:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() – this.year;
  }
}

let myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML =
“My car is ” + myCar.age() + ” years old.”;

متد age در اینجا تاریخ مبدا را می گیرد و از سال تولید ماشین کم میکند تا بتوانیم سن ماشین را برگردانیم.

Class Inheritance

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

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

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return ‘I have a ‘ + 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();