super Kullanımı

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

Bir metodu geçersiz kıldığınızda (override), super.methodName() kullanarak ebeveynin orijinal versiyonuna hâlâ erişebilirsiniz. Bu, ebeveyn davranışını tamamen değiştirmek yerine genişletmenize veya değiştirmenize olanak tanır.

Bir metodu olan bir ebeveyn sınıf oluşturun:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

Ebeveyn sınıfı genişleten bir alt sınıf oluşturun:

class Dog extends Animal {
  makeSound() {
    // Önce ebeveynin metodunu çağırın
    const parentSound = super.makeSound();
    // Ardından ek işlevsellik ile genişletin
    return `${parentSound}, but also Woof!`;
  }
}

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

const myDog = new Dog();
console.log(myDog.makeSound());
// Çıktı: "Generic animal sound, but also Woof!"

super anahtar kelimesi, alt sınıfa kendi işlevselliğinizi eklemeye devam ederken üst sınıfın metotlarını çağırmanıza olanak tanır.

Görev

Size, bir calculateArea() metoduna sahip bir Shape sınıfı ve onu genişleten (extend eden) bir Rectangle sınıfı verilmiştir. Göreviniz, Rectangle sınıfındaki calculateArea() metodunu super kullanarak geçersiz kılmaktır (override).

Göreviniz, Rectangle sınıfındaki calculateArea() metodunu şu şekilde tamamlamaktır:

super kullanarak üst sınıfın calculateArea() metodunu çağırın ve sonucu saklayın
Dikdörtgenin gerçek alanını hesaplayın: width × height
Birleştirilmiş bir dize döndürün: üst sınıfın mesajı + dikdörtgen alanı. Örnek: Calculating area... Rectangle area: 50

Kopya kağıdı

Geçersiz kılma (overriding) işlemi yaparken üst sınıfın orijinal metoduna erişmek için super.methodName() kullanın:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

class Dog extends Animal {
  makeSound() {
    const parentSound = super.makeSound();
    return `${parentSound}, but also Woof!`;
  }
}

const myDog = new Dog();
console.log(myDog.makeSound());
// Çıktı: "Generic animal sound, but also Woof!"

Bu, üst sınıfın işlevselliğini tamamen değiştirmek yerine onu genişletmenize olanak tanır.

Kendin dene

import { Shape } from './shapes.js';
import { Rectangle } from './shapes.js';

// Test kodu - değiştirmeyin
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // Beklenen: "Calculating area... Rectangle area: 50"