Sınıf Düzeyi ve Örnek Düzeyi

Coddy'nin JavaScript Journey'sinin Nesne Yönelimli Programlama bölümünün bir parçası — ders 31 / 56.

JavaScript sınıflarında, iki farklı özellik ve yöntem düzeyi vardır:

Örnek düzeyi (Instance-level): Sınıftan oluşturulan her bir nesneye ait olan özellikler ve yöntemler.
Sınıf düzeyi (Class-level): Örneklere değil, sınıfın kendisine ait olan özellikler ve yöntemler.

Gelin farkı anlayalım:

İlk olarak, örnek düzeyindeki üyelere bakalım. Bir örnek yöntemi (instance method) olan normal bir sınıf oluşturun:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Car sınıfının bir örneğini oluşturun:

const myCar = new Car("Toyota");

Örnek metodunu çağırın:

console.log(myCar.drive()); // Çıktı: "The Toyota is driving"

Her örneğin drive metodunun kendi kopyasını aldığını ve this kullanarak kendi özelliklerine erişebildiğini fark edin.

Şimdi sınıf düzeyindeki üyelere bakalım. Sınıfımıza statik bir yöntem ekliyoruz. Örneklere değil, sınıfın kendisine ait bir yöntem oluşturmak için yöntem adının önüne static anahtar kelimesini kullanın.

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

Statik metotlar, belirli örnek verilerine bağlı olmayan yardımcı fonksiyonlar için kullanışlıdır. Statik metot, örnekler üzerinde değil, sınıfın kendisi üzerinde çağrılır:

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // Çıktı: "Comparing Toyota with Honda"

Bir örnek (instance) üzerinde statik bir yöntemi çağırmaya çalışmak hatayla sonuçlanacaktır:

car1.compareModels(car1, car2); // Hata: car1.compareModels bir fonksiyon değildir

Görev

Size sadece bir yapıcıya (constructor) sahip bir Calculator sınıfı verilmiştir. Göreviniz iki metot eklemektir:

1. Örnek Metodu (Instance Method) <strong>add(number)</strong>

Verilen sayıyı hesap makinesinin mevcut değerine ekler
this.value değerini günceller ve yeni değeri döndürür
*Hesap makinesi örnekleri üzerinde çağrılır: calc.add(3)

2. Statik Metot (Static Method) <strong>multiply(num1, num2)</strong>

İki sayı alır ve bunların çarpımını döndürür
this anahtar kelimesini KULLANMAZ (statik metotlar örnek verilerine sahip değildir)
*Doğrudan Calculator sınıfı üzerinden çağrılır: Calculator.multiply(4, 6)

Kopya kağıdı

JavaScript sınıfları iki seviyeli özelliklere ve metotlara sahiptir:

Örnek (Instance) seviyesi: Sınıftan oluşturulan her bir nesneye aittir
Sınıf (Class) seviyesi: Örneklere değil, sınıfın kendisine aittir

Örnek Metotları (Instance Methods):

this kullanarak örnek özelliklerine erişebilen normal metotlar:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

Statik Metotlar (Static Methods):

Sınıfın kendisine ait metotlar oluşturmak için static anahtar kelimesini kullanın. Bu metotlar örnekler üzerinde değil, sınıf üzerinde çağrılırlar:

class Car {
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

// Sınıfın kendisi üzerinde çağırın
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// Bir örnek üzerinde çağırmak hataya neden olur
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

Statik metotlar, belirli örnek verilerine bağlı olmayan yardımcı fonksiyonlar için kullanışlıdır.

Kendin dene

import { Calculator } from './calculator.js';


// Aşağıdaki kodu değiştirmeyin
const calc = new Calculator(5);        // Değeri 5 olan bir hesap makinesi oluşturur
const result1 = calc.add(3);           // 3 eklemeli → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // 4 × 6 = 24 çarpmalı
console.log(result1);                   // Beklenen: 8
console.log(result2);                   // Beklenen: 24