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

1. הרעיון: הרחבת הקיים במקום הוספת אוביקטים

ירושה ב JavaScript עובדת באמצעות שרשרת Prototypes.כך למשל אם יש לנו רכיב שנקרא ״פקד״ ורכיב שנקרא ״תיבת טקסט״ ותיבת הטקסט צריכה לקבל את הפונקציה reset מרכיב הפקד נוכל לכתוב את הקוד הבא:

function Component() {
  // Component init code ...
}

Component.prototype.reset = function() {
  // reset code here...
};

function TextBox() {
  Component.call(this);

  // TextBox init code ...
}
TextBox.prototype = Object.create(Component.prototype);

עבור כל אוביקט TextBox נקבל שרשרת Prototypes שנראית בערך כך:

Mixin היא תבנית עיצוב שמציעה כיוון אחר לחשוב על שיתוף הקוד. במקום להוסיף אוביקט נוסף לשרשרת ה Prototypes אנו נעתיק את הפונקציות הרלוונטיות מתוכו אל ה Prototype של TextBox. בתבנית זו אין צורך לקרוא לקוד אתחול בבנאי מאחר ואוביקט המיקסין הוא בסך הכל אוסף של פונקציות. התבנית מתאימה כשאין משמעות לסדר הקריאה או לאתחול שדות מסוימים, ובמקרים כאלה תתן גמישות רבה יותר כשהיררכית הירושה מורכבת.
לצורך ההעתקה אפשר להשתמש בפונקציה extend מספריית Underscore או ב Object.assign של ES6. כך יראה הקוד בגירסת המיקסינים:

var ResetableComponent = {
  reset: function() {
    this.value = "";
  }
};

function TextBox() {
  this.value = "";
}

Object.assign(TextBox.prototype, ResetableComponent);

TextBox.prototype.write = function(text) {
  this.value += text;
};

מוזמנים לשחק עם הקוד ב jsbin הבא:
https://jsbin.com/humaho/edit?js,console

2. מיקסינים ושימוש חוזר בקוד באנגולר

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