מתודות ומאפיינים סטטיים ב-JavaScript: מילת המפתח static

איברים סטטיים שייכים למחלקה, לא למופע

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

class MathUtils {
    static double(n) {
        return n * 2;
    }
}

console.log(MathUtils.double(21));

const m = new MathUtils();
// console.log(m.double(21));  // TypeError: m.double is not a function

double נמצאת על MathUtils, לא על המופעים שלה. יצירת מופע לא עוזרת: m.double הוא undefined. זה ההפך ממתודות רגילות, שנמצאות על המופעים (טכנית, על ה-prototype) ואינן נראות מהמחלקה.

המודל המחשבתי: מילת המפתח class יוצרת שני דברים: קבוצה של מתודות מופע (שמשמשות את new MathUtils()) וקבוצה של מתודות סטטיות (שמשמשות את MathUtils ישירות). מילת המפתח static בוחרת לאיזו קבוצה איבר נכנס.

השימוש הקלאסי: מתודות Factory

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

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

    static fromJSON(json) {
        const data = JSON.parse(json);
        return new User(data.name, data.email);
    }
}

const ada = User.fromJSON('{"name":"Ada","email":"ada@example.com"}');
console.log(ada.name, ada.email);

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

מאפיינים סטטיים

אפשר גם להצמיד נתונים למחלקה עצמה:

class Circle {
    static PI = 3.14159;

    constructor(radius) {
        this.radius = radius;
    }

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

console.log(Circle.PI);
console.log(new Circle(5).area());

Circle.PI משותף לכל העיגולים: זה קבוע על המחלקה, לא עותק בכל מופע. בתוך מתודות מופע, ניגשים אליו דרך שם המחלקה (Circle.PI), לא דרך this.

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

this בתוך מתודה סטטית הוא המחלקה

בתוך מתודה רגילה, this הוא המופע. בתוך מתודה סטטית, this הוא המחלקה:

class Counter {
    static count = 0;

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

console.log(Counter.increment());
console.log(Counter.increment());
console.log(Counter.count);

this.count בתוך increment פירושו Counter.count. זה אולי מרגיש מוזר בהתחלה, אבל זה מה שגורם לירושה של מתודות סטטיות לעבוד: this מפנה למחלקה שדרכה קראתם למתודה, לא למחלקה שהגדירה אותה.

מתודות סטטיות וירושה

מתודות סטטיות עוברות בירושה למחלקות יורשות. ומכיוון ש-this מצביע על המחלקה שדרכה נקראה המתודה, מתודות factory מייצרות אוטומטית את המחלקה היורשת הנכונה:

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

    static create(name) {
        return new this(name);
    }
}

class Dog extends Animal {
    bark() {
        return `${this.name} says woof`;
    }
}

const d = Dog.create("Rex");
console.log(d instanceof Dog);
console.log(d.bark());

Animal.create משתמשת ב-new this(name). כשקוראים ל-Dog.create("Rex"), this הוא Dog, ולכן new this(name) בונה Dog. אם הייתם כותבים שם new Animal(name), תמיד היה נוצר Animal, והדפוס היה נשבר. זו הסיבה העיקרית ש-this במתודות סטטיות מצביע על המחלקה.

סטטי מול מופע: השוואה מעשית

הנה אותה לוגיקה, מחולקת בין שני הסגנונות:

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

    // Instance method: needs a specific temperature.
    toFahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }

    // Static method: pure conversion, no instance needed.
    static celsiusToFahrenheit(c) {
        return c * 9 / 5 + 32;
    }
}

const t = new Temperature(100);
console.log(t.toFahrenheit());
console.log(Temperature.celsiusToFahrenheit(100));

שתיהן עושות את אותו חישוב. גרסת המופע קוראת נתונים מ-this.celsius. הגרסה הסטטית מקבלת את הקלט שלה כארגומנט. בחרו במתודת מופע כשהפעולה היא "משהו שהאובייקט הזה עושה"; בחרו במתודה סטטית כשהיא "משהו שהמחלקה הזו יודעת לחשב בהינתן קלט".

בלוקים סטטיים לאתחול

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

class Config {
    static values = {};

    static {
        const env = "production";
        this.values.env = env;
        this.values.debug = env !== "production";
        this.values.apiUrl = env === "production"
            ? "https://api.example.com"
            : "http://localhost:3000";
    }
}

console.log(Config.values);

בלוק static { ... } רץ פעם אחת, כשהמחלקה מוגדרת. בתוכו, this הוא המחלקה. השתמשו בו לאתחול של כמה שלבים; להשמה אחת, שדה סטטי רגיל ברור יותר.

איברים סטטיים פרטיים

גם שדות סטטיים יכולים להיות פרטיים, עם הקידומת #. אפשר לגשת אליהם רק מתוך המחלקה:

class IdGenerator {
    static #nextId = 1;

    static next() {
        return IdGenerator.#nextId++;
    }
}

console.log(IdGenerator.next());
console.log(IdGenerator.next());
// console.log(IdGenerator.#nextId);  // SyntaxError

#nextId חתום בתוך המחלקה. קוד חיצוני יכול לקרוא ל-IdGenerator.next() אבל לא יכול לגעת במונה או לאפס אותו. לשדות פרטיים יש דף משלהם בקרוב, אבל כדאי לדעת שהשילוב של static ו-# עובד.

מתי לא להשתמש ב-static

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

השתמשו ב-static כש:

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

אחרת, פונקציה רגילה היא הכלי הפשוט יותר.

הבא בתור: שדות פרטיים

ראיתם לרגע את #nextId: זה התחביר של שדות פרטיים ב-JavaScript. הוא עובד גם לאיברי מופע וגם לאיברים סטטיים, והוא הדרך המודרנית להסתיר פרטי מימוש בתוך מחלקה. זה הדף הבא.