ES6 Klasslari

React ES6 Klasslari

Klasslar

ES6 klasslarni joriy etdi.

Klass - bu funksiya turidir, ammo uni yaratish uchun function kalit so‘zidan foydalanish o‘rniga, class kalit so‘zidan foydalanamiz va xususiyatlarni constructor() metodida belgilaymiz.

Misol Oddiy klass konstruktor:

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

Klass nomining katta harf bilan boshlanishiga e'tibor bering. Klasslar uchun bu standart nomlash konventsiyasi hisoblanadi.

Endi siz Car klassidan obyektlar yaratishingiz mumkin:

Misol Car klassiga asoslangan mycar nomli obyektni yarating:

class Car {
  constructor(name) {
    this.brand = name;
  }
}
 
const mycar = new Car('Ford');

Eslatma: Konstruktor funktsiyasi obyektni inicializatsiya qilganda avtomatik ravishda chaqiriladi.

Klasslarda Metodlar

Siz klasslarga o‘z metodlaringizni qo‘shishingiz mumkin:

Misol present nomli metodni yarating:

class Car {
  constructor(name) {
    this.brand = name;
  }
 
  present() {
    return 'I have a ' + this.brand;
  }
}
 
const mycar = new Car('Ford');
mycar.present();

Yuqoridagi misolda metodni chaqirish uchun obyektning metod nomiga va keyin qavslarni qo‘shasiz (parametrlar qavslarga joylashtiriladi).

Klass Merosxo‘rligi

Klass merosxo‘rligini yaratish uchun extends kalit so‘zidan foydalaning.

Merosxo‘rlik bilan yaratilgan klass boshqa klassning barcha metodlarini meros qilib oladi:

Misol Car klassidan metodlarni meros qilib oladigan Model nomli klassni yarating:

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();

super() metodi ota-ona klassga murojaat qiladi.

Konstruktor metodida super() metodini chaqirib, biz ota-ona klassning konstruktor metodini chaqiramiz va ota-ona klassning xususiyatlari va metodlariga kirish imkoniyatini olamiz.

Klasslar haqida ko‘proq ma'lumot olish uchun, JavaScript Klasslari bo‘limimizga qarang.