על Method Chaining ב-JavaScript

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

אז מה זה Method Chaining?

Method Chaining הוא syntax פשוט ונוח לביצוע מספר מתודות בזו אחר זו על instance של מחלקה מסוימת. אל דאגה, זה רק נשמע מסובך.
בואו נתחיל.

יצירת מחלקה פשוטה

בדוגמה הבאה יצרתי מחלקה (class) פשוטה בשם Person באמצעות המילה השמורה class (תודות לתקן ES6 הוותיק).
למחלקה מספר מתודות פשוטות: setName, setAge, setCountry, sayHello.

class Person {
    setName(name) {
        this.name = name;
    }
    setAge(age) {
        this.age = age;
    }
    setCountry(country) {
        this.country = country;
    }
    sayHello() {
        console.log(`Hi! My name is ${this.name}, I'm ${this.age} years old and I'm from ${this.country}`);
    }
}

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

let john = new Person();
john.setName('John');
john.setAge(30);
john.setCountry('United States');
john.sayHello();

וזה מה שאקבל בקונסול כמובן:

אם כתבתם jQuery למשל, אתם יודעים שניתן לשרשר מתודות בזו אחר זו, לדוגמה:

jQuery("#main").html("Welcome!").css('background-color','blue');

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

let john = new Person();
john.setName('John').setAge(30).setCountry('United States').sayHello();

וודאי שזה לא יעבוד:

המתודה הראשונה יוצאת אל הפועל ומבוצעת כראוי, המתודה השנייה מנסה להשתמש ב-this שהמתודה הקודמת אמורה לספק לה, מה שלא קורה בפועל ולכן מתקבלת השגיאה.

אז איך גורמים ל-Method Chaining לעבוד?

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

class Person {
    setName(name) {
        this.name = name;
        return this;
    }
    setAge(age) {
        this.age = age;
        return this;
    }
    setCountry(country) {
        this.country = country;
        return this;
    }
    sayHello() {
        console.log(`Hi! My name is ${this.name}, I'm ${this.age} years old and I'm from ${this.country}`);
        return this;
    }
}

כעת הכל יעבוד כראוי.

מדוע גם המתודה האחרונה sayHello אמורה להחזיר את this?

מסיבה פשוטה שבמידה ובבוא הזמן נוסיף מתודה חדשה לשרשור לא נקבל שגיאה.

לא הכי ידידותי כאשר מבצעים debugging

שימו לב ש-Method Chaining מקשה על היכולת לבצע debugging מאחר ולא ניתן לשים breakpoint בנקודה הרצויה.

בהצלחה!

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