ana_sayfa / js / s-n-flar-classes-ve-prototip
📜 JavaScript 📊 İleri ⏱ 40 dk 📋 1 Kod Örneği

Sınıflar (Classes) ve Prototip

ES6 class söz dizimi, kalıtım, private alanlar ve static metodlar.

ES6 ile gelen class söz dizimi, JavaScript'in prototip tabanlı kalıtımını daha okunabilir bir şekilde yazmamızı sağlar. Altta yatan mekanizma değişmez, sadece söz dizimi kolaylaşır.

Private Alan (#) Neden Önemli?

Sınıfın iç verilerini dışarıdan erişime kapatır. # ile tanımlanan alanlar yalnızca sınıf içinden erişilebilir. Bu kapsülleme (encapsulation) prensibinin uygulamasıdır.

Getter ve Setter

get ile özellik gibi erişilen metotlar, set ile atama sırasında çalışan metotlar tanımlanır. Doğrulama ve hesaplanan özellikler için idealdir.

Mixin Deseni

JavaScript tek kalıtım destekler — bir sınıf yalnızca bir sınıftan extend edilebilir. Birden fazla kaynaktan davranış eklemek için mixin deseni kullanılır: fonksiyon olarak tanımlanmış sınıf katmanları.

Symbol.iterator ile Iterable Sınıf

Symbol.iterator metodu tanımlanmış nesneler for...of döngüsünde ve spread operatöründe kullanılabilir hale gelir. Bu JavaScript'in en güçlü protokollerinden biridir.

JS Class Sistemi
// ── Temel Sınıf ──
class Hayvan {
  // Private alan (# ile)
  #ses;
  #saglik;

  // Static alan
  static toplam_hayvan = 0;

  constructor(ad, tur, ses) {
    this.ad  = ad;
    this.tur = tur;
    this.#ses = ses;
    this.#saglik = 100;
    Hayvan.toplam_hayvan++;
  }

  // Getter
  get saglik() { return this.#saglik; }

  // Setter
  set saglik(deger) {
    if (deger < 0 || deger > 100) throw new RangeError("0-100 arası olmalı!");
    this.#saglik = deger;
  }

  // Metot
  sesCikar() { return `${this.ad}: ${this.#ses}!`; }
  bilgi() { return `${this.ad} (${this.tur}), Sağlık: ${this.#saglik}`; }

  // Static metot
  static getToplam() { return Hayvan.toplam_hayvan; }

  // toString override
  toString() { return this.bilgi(); }
}

// ── Kalıtım ──
class Kopek extends Hayvan {
  #irk;

  constructor(ad, irk) {
    super(ad, "Köpek", "Hav hav"); // Üst sınıf constructor
    this.#irk = irk;
  }

  // Override
  sesCikar() {
    const temel = super.sesCikar();
    return `${temel} (${this.#irk} irkı)`;
  }

  getIrk() { return this.#irk; }

  // Mixin gibi kullanım
  getirGotir(nesne) {
    return `${this.ad} "${nesne}" getiriyor! 🐕`;
  }
}

// ── Mixin Deseni ──
const Uzanabilir = (Base) => class extends Base {
  uzan() { return `${this.ad} uzanıyor...`; }
};

const YuzebilirHayvan = (Base) => class extends Base {
  yuz() { return `${this.ad} yüzüyor...`; }
};

class Ordek extends YuzebilirHayvan(Uzanabilir(Hayvan)) {
  constructor(ad) { super(ad, "Ördek", "Vak vak"); }
}

// ── Kullanım ──
const kopek = new Kopek("Rex", "Golden Retriever");
kopek.saglik = 85;
console.log(kopek.sesCikar()); // Rex: Hav hav! (Golden Retriever irkı)
console.log(kopek.bilgi());    // Rex (Köpek), Sağlık: 85
console.log(kopek.getirGotir("top"));

const ordek = new Ordek("Donald");
console.log(ordek.yuz());      // Donald yüzüyor...
console.log(ordek.uzan());     // Donald uzanıyor...

console.log(Hayvan.getToplam()); // 2

// instanceof kontrolü
console.log(kopek instanceof Kopek);  // true
console.log(kopek instanceof Hayvan); // true

// ── Iterator ve Generator ──
class SayiDizisi {
  constructor(baslangic, bitis) {
    this.baslangic = baslangic;
    this.bitis     = bitis;
  }

  // Symbol.iterator ile iterable yap
  [Symbol.iterator]() {
    let mevcut = this.baslangic;
    const bitis = this.bitis;
    return {
      next() {
        return mevcut <= bitis
          ? { value: mevcut++, done: false }
          : { value: undefined, done: true };
      }
    };
  }
}

const dizi = new SayiDizisi(1, 5);
for (const sayi of dizi) {
  console.log(sayi); // 1, 2, 3, 4, 5
}
console.log([...dizi]); // [1, 2, 3, 4, 5]

// ── Generator ──
function* sonsuzSayac(baslangic = 0) {
  let i = baslangic;
  while (true) {
    yield i++;
  }
}

const sayac = sonsuzSayac(1);
console.log(sayac.next().value); // 1
console.log(sayac.next().value); // 2
console.log(sayac.next().value); // 3
CANLI ÖNİZLEME
← Önceki Ders
ES6+ Modern JavaScript