ירושה ב-JavaScript: extends, super ודריסת מתודות

מחלקה אחת שנבנית על אחרת

ירושה מאפשרת למחלקה להתחיל מהשרטוט של מחלקה אחרת ולהרחיב אותו. מקבלים בחינם כל שדה ומתודה של מחלקת האב, ואפשר להוסיף או לשנות כל מה שצריך:

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        return `${this.name} makes a sound`;
    }
}

class Dog extends Animal {
    fetch() {
        return `${this.name} fetches the ball`;
    }
}

const rex = new Dog("Rex");
console.log(rex.speak());
console.log(rex.fetch());

Dog extends Animal אומר: "Dog הוא Animal, ועוד קצת". ל-rex אין מתודת speak משלו, אבל החיפוש ממשיך ל-Animal, שיש לו. ההמשך הזה למעלה הוא כל המנגנון: זו פשוט שרשרת prototype עם תחביר נחמד יותר.

super בבנאי

לתת-מחלקה עם בנאי משלה יש כלל אחד נוקשה: לקרוא ל-super(...) לפני שנוגעים ב-this. super מריצה את הבנאי של מחלקת האב, והוא זה שבפועל יוצר ומאתחל את האובייקט:

class Animal {
    constructor(name) {
        this.name = name;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}

const rex = new Dog("Rex", "Labrador");
console.log(rex.name, rex.breed);

דלגו על השורה super(name) ותקבלו ReferenceError ברגע שתנסו לקרוא או לכתוב ל-this. המנוע פשוט מסרב לתת לכם this עד שמחלקת האב קיבלה את התור שלה.

אם תת-מחלקה לא מצהירה על בנאי משלה, JavaScript יוצרת בנאי שמעביר את כל הארגומנטים ל-super, כך שצריך לכתוב בנאי רק כשמוסיפים שדות או מבצעים הגדרות נוספות.

דריסת מתודות

תת-מחלקה יכולה להגדיר מחדש כל מתודה שהיא יורשת. הקרובה ביותר בשרשרת מנצחת:

class Animal {
    speak() {
        return "generic animal noise";
    }
}

class Dog extends Animal {
    speak() {
        return "woof";
    }
}

class Cat extends Animal {
    speak() {
        return "meow";
    }
}

console.log(new Animal().speak());
console.log(new Dog().speak());
console.log(new Cat().speak());

אין כאן קסם: כשקוראים ל-speak() על Dog, המנוע מחפש את speak על המופע, אחר כך על Dog.prototype, מוצא אותה ועוצר. הוא אף פעם לא מגיע ל-Animal.prototype.

להרחיב, לא להחליף: super.method()

לפעמים לא רוצים להחליף את המתודה של מחלקת האב, אלא להוסיף עליה. super.method(...) קוראת לגרסה של מחלקת האב מתוך הדריסה:

class Animal {
    constructor(name) {
        this.name = name;
    }

    describe() {
        return `I am ${this.name}`;
    }
}

class Dog extends Animal {
    describe() {
        const base = super.describe();
        return `${base}, and I am a dog`;
    }
}

console.log(new Dog("Rex").describe());

כאן ירושה מצדיקה את עצמה: תת-המחלקה משתמשת שוב בלוגיקה של מחלקת האב במקום להעתיק אותה. אם Animal.describe תשתנה בהמשך, Dog.describe תקבל את השינוי בחינם.

super עובדת בכל מתודה, לא רק בבנאי. היא תמיד מתייחסת לגרסה של מחלקת האב של מה שאתם קוראים לו.

instanceof והשרשרת

instanceof בודק אם שרשרת ה-prototype של אובייקט כוללת מחלקה מסוימת. כל מופע של תת-מחלקה הוא גם מופע של מחלקות האב שלה:

class Animal {}
class Dog extends Animal {}
class Puppy extends Dog {}

const p = new Puppy();
console.log(p instanceof Puppy);
console.log(p instanceof Dog);
console.log(p instanceof Animal);
console.log(p instanceof Object);

כל הארבעה הם true. השרשרת היא Puppy -> Dog -> Animal -> Object, ו-instanceof עובר עליה. שימושי לבדיקות טיפוס, אם כי בפועל תשתמשו בו פחות ממה שנדמה: רוב הקוד פשוט קורא למתודות ונותן לפולימורפיזם לטפל בשאר.

דוגמה קצת יותר גדולה

תבנית נפוצה: מחלקת בסיס עם לוגיקה משותפת, וכמה תת-מחלקות שמתמחות בה.

class Shape {
    constructor(name) {
        this.name = name;
    }

    area() {
        return 0;
    }

    describe() {
        return `${this.name} with area ${this.area().toFixed(2)}`;
    }
}

class Circle extends Shape {
    constructor(radius) {
        super("Circle");
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius ** 2;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super("Rectangle");
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

const shapes = [new Circle(5), new Rectangle(4, 6)];
shapes.forEach(s => console.log(s.describe()));

שימו לב ש-describe נמצאת ב-Shape ואף פעם לא צריך לכתוב אותה מחדש: היא פשוט קוראת ל-this.area(), שמתפרשת לתת-המחלקה הנכונה בזמן ריצה. זה פולימורפיזם: אותו מקום קריאה, התנהגות שונה לפי האובייקט בפועל.

ירושה מול composition

ירושה מפתה כי היא מרגישה פרודוקטיבית: שורה אחת נותנת ערימה של מתודות. היא מזדקנת רע כשההיררכיות גדלות.

כלל אצבע: השתמשו ב-extends כשהיחס הוא בבירור "X הוא סוג של Y" ותת-המחלקה באמת חולקת את רוב ההתנהגות של מחלקת האב. כשאתם פונים לירושה רק כדי לשתף מתודת עזר אחת או שתיים, העדיפו composition: תנו למחלקה שדה שמחזיק את אובייקט העזר:

// Composition: User "has a" logger, not "is a" logger.
class Logger {
    log(message) {
        console.log(`[log] ${message}`);
    }
}

class User {
    constructor(name) {
        this.name = name;
        this.logger = new Logger();
    }

    greet() {
        this.logger.log(`Hello from ${this.name}`);
    }
}

new User("Ada").greet();

עצי ירושה עמוקים (Animal -> Mammal -> Dog -> WorkingDog -> PoliceDog) נראים מסודר בתרשימים ונעשים כואבים בקוד: שינוי קרוב לשורש מתגלגל באופן בלתי צפוי לכל הצאצאים. רוב בסיסי הקוד הבריאים נשארים ברמה אחת או שתיים ונשענים על composition לכל השאר.

הבא בתור: Static Members

כל מה שבעמוד הזה נמצא על מופעים: מתודות שקוראים להן דרך new Thing().something(). לפעמים רוצים מתודות או נתונים ששייכים למחלקה עצמה, לא למופע מסוים. בשביל זה קיים static, והוא הנושא הבא.