מחלקות ב-JavaScript: בנאים, מתודות ומילת המפתח new

מחלקה היא תוכנית אב לאובייקטים

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

המבנה הבסיסי:

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    greet() {
        return `Hi, I'm ${this.name}`;
    }
}

const ada = new User("Ada", "ada@example.com");
const boris = new User("Boris", "boris@example.com");

console.log(ada.greet());
console.log(boris.greet());

class User { ... } מגדיר את תוכנית האב. new User(...) יוצר מופע. כל מופע מקבל name ו-email משלו, אבל שניהם חולקים את מתודת greet היחידה שמוגדרת במחלקה.

שני מופעים, שתי קבוצות נתונים, קבוצה אחת של מתודות. זה כל הרעיון.

ה-constructor מכין כל מופע

ה-constructor הוא מתודה מיוחדת שרצה בדיוק פעם אחת לכל מופע, ברגע ש-new יוצר אותו. התפקיד שלו הוא לאתחל את האובייקט הטרי, בדרך כלל על ידי העתקת הארגומנטים ל-this:

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

const p = new Point(3, 4);
console.log(p.x, p.y);

this בתוך הבנאי מתייחס למופע החדש שנבנה עכשיו. ההצבה this.x = x שמה את x על האובייקט הספציפי הזה. כל קריאה ל-new Point(...) מקבלת this משלה, ולכן x ו-y משלה.

אם לא כותבים בנאי, JavaScript נותנת לכם בנאי ריק בחינם. צריך לכתוב אחד רק כשבאמת יש הכנות לעשות.

new הוא מה שמפעיל את המנגנון

קריאה למחלקה בלי new זורקת שגיאה:

const p = Point(3, 4);
// TypeError: Class constructor Point cannot be invoked without 'new'

זה מכוון. new עושה ארבעה דברים לפי הסדר:

1. יוצר אובייקט ריק חדש.
2. מקשר אותו ל-prototype של המחלקה (שם גרות המתודות).
3. מריץ את ה-constructor כש-this קשור לאובייקט החדש.
4. מחזיר את האובייקט החדש.

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

מתודות משותפות, שדות לכל מופע

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

class Counter {
    constructor() {
        this.count = 0;
    }

    increment() {
        this.count += 1;
    }
}

const a = new Counter();
const b = new Counter();

a.increment();
a.increment();
b.increment();

console.log(a.count, b.count);
console.log(a.increment === b.increment);

לכל אחד מהמופעים יש count משלו, כך שהגדלה של אחד לא משפיעה על השני. אבל a.increment ו-b.increment הם ממש אותה פונקציה: שמורה פעם אחת על ה-prototype, ונמצאת בכל פעם שקוראים לה על מופע. זו הסיבה שמחלקות זולות גם בכמויות גדולות: אלף מופעים לא יוצרים אלף עותקים של כל מתודה.

שדות מחלקה

אפשר להצהיר על שדות מופע בראש גוף המחלקה, מחוץ לבנאי:

class Counter {
    count = 0;
    step = 1;

    increment() {
        this.count += this.step;
    }
}

const c = new Counter();
c.increment();
c.increment();
console.log(c.count);

הצהרות שדות רצות לפני גוף הבנאי, כאילו נכתבו בראש ה-constructor. הן שימושיות כשהערך ההתחלתי לא תלוי בארגומנטים של הבנאי: נקי יותר מלהעמיס על הבנאי this.count = 0; this.step = 1;.

כשהערכים כן תלויים בארגומנטים, השאירו את ההצבה בבנאי, שם הארגומנטים זמינים.

Getters ו-Setters

getter או setter נראים כמו מתודה אבל מתנהגים כמו גישה למאפיין. קוראים או מציבים בלי סוגריים, והמתודה רצה מאחורי הקלעים:

class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }

    get fahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value) {
        this.celsius = (value - 32) * 5 / 9;
    }
}

const t = new Temperature(20);
console.log(t.fahrenheit);

t.fahrenheit = 100;
console.log(t.celsius);

שימו לב לאופן הקריאה: t.fahrenheit (בלי סוגריים) קורא ל-getter, ו-t.fahrenheit = 100 מפעיל את ה-setter. מבחוץ, fahrenheit נראה כמו מאפיין רגיל, אבל הוא מחושב בזמן אמת מתוך celsius.

getters מצוינים לערכים נגזרים. setters מצוינים לאימות או לנרמול של ערך בזמן ההצבה. אל תגזימו איתם: אם getter יקר לחישוב, מי שקורא את הקוד יופתע ש"גישה למאפיין" עושה עבודה אמיתית.

תחביר מתודה מקוצר, שמות מחושבים ו-this

הגדרות מתודה במחלקה משתמשות בתחביר מקוצר: בלי מילת המפתח function, ובלי : בין השם לגוף:

class Playlist {
    constructor(name) {
        this.name = name;
        this.tracks = [];
    }

    add(track) {
        this.tracks.push(track);
        return this;
    }

    size() {
        return this.tracks.length;
    }
}

const p = new Playlist("Focus")
    .add("Clair de Lune")
    .add("Gymnopédie No. 1");

console.log(p.name, p.size());

החזרת this מ-add מאפשרת שרשור מתודות: כל קריאה מחזירה את אותו מופע, כך שהמתודה הבאה יכולה לרוץ עליו.

מלכודת אחת: מתודות לא קשורות אוטומטית למופע שלהן. אם שולפים מתודה וקוראים לה לבד, this הולך לאיבוד:

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

    hello() {
        return `Hi, ${this.name}`;
    }
}

const g = new Greeter("Ada");
const fn = g.hello;
// console.log(fn());          // TypeError: Cannot read properties of undefined

console.log(g.hello.bind(g)()); // works
console.log(g.hello());         // works

הקריאה g.hello() עובדת כי ה-. מספק את this. הקריאה fn() לבדה לא עובדת. אם צריך מתודה מנותקת שכבר קשורה מראש (מקרה נפוץ ב-event handlers), קשרו אותה בבנאי או השתמשו בשדה מחלקה שהוא arrow function: hello = () => \Hi, ${this.name}`;`.

דוגמה קטנה שעובדת

מחברים את כל החלקים: שדות, בנאי, מתודות ו-getter:

class BankAccount {
    balance = 0;

    constructor(owner, opening = 0) {
        this.owner = owner;
        this.balance = opening;
    }

    deposit(amount) {
        this.balance += amount;
        return this;
    }

    withdraw(amount) {
        if (amount > this.balance) throw new Error("Insufficient funds");
        this.balance -= amount;
        return this;
    }

    get summary() {
        return `${this.owner}: $${this.balance}`;
    }
}

const acct = new BankAccount("Rosa", 100).deposit(50).withdraw(30);
console.log(acct.summary);

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

מחלקות הן בעצם פונקציות

דבר אחד שכדאי להפנים: class הוא בעיקר תחביר נוח. מתחת לפני השטח, מחלקה היא פונקציה, ליתר דיוק פונקציית בנאי, והמתודות שלה גרות על ClassName.prototype:

class User {
    constructor(name) { this.name = name; }
    greet() { return `Hi, ${this.name}`; }
}

console.log(typeof User);
console.log(User.prototype.greet);
console.log(new User("Ada").greet === User.prototype.greet);

typeof User הוא "function". greet גרה על User.prototype. מופעים מוצאים את greet דרך שרשרת ה-prototype, אותו מנגנון שקיים בשפה מהיום הראשון. מחלקות רק נותנות תחביר נקי להגדרה שלו.

המודל המחשבתי הזה משתלם בהמשך: ירושה, instanceof ודיבוג של שרשראות prototype הופכים לברורים יותר ברגע שזוכרים שמחלקה היא פונקציה שהמתודות שלה תלויות על ה-prototype שלה.

הבא בתור: ירושה

עד עכשיו כל מחלקה עמדה לבדה. רוב העיצובים האמיתיים בונים היררכיות של מחלקות: Dog שהוא סוג של Animal, AdminUser שהוא סוג של User. מילות המפתח extends ו-super מטפלות בזה, והן הבאות בתור.