• בלוג
  • היום למדתי: פרוטוטייפ ופונקציות חץ

היום למדתי: פרוטוטייפ ופונקציות חץ

04/07/2025

עזרתי לחבר עם איזה באג שהביא אותי לקוד הבא מתוך ספריית JavaScript ישנה:

/**
 * Used to determine we'll call be calling React.createElement on the component of if this is a
 * generator function used return a function that takes props to return a React element
 * @param component
 * @returns {boolean}
 */
function generatorFunction(component) {
  if (!component.prototype) {
    return false;
  }

  // es5 or es6 React Component
  return !component.prototype.isReactComponent;
}

מישהו כתיב פונקציה כדי להבחין בין שני מקרים מאוד דומים:

  1. העברת React Component ל API.

  2. העברת פונקציה שמחזירה React Component ל API.

האנטי תבנית כאן היא ברורה - שפת JavaScript לא עושה חיים קלים למי שרוצה להבדיל בין טיפוסים בזמן ריצה. כן יש את typeof אבל גם את Array.isArray וגם את Number.isNaN ויש הרבה כללים לזכור. ועכשיו נסו להבדיל בין "פונקציה שהיא React Component" ל"פונקציה שמחזירה React Component". לא ככה מתכננים API.

עכשיו מה היה הבאג? שימו לב:

> generatorFunction(function() { 10 })
true
> generatorFunction(() => 10)
false

פונקציה שמוגדרת עם המילה function מכילה prototype ריק, ולכן ה isReactComponent שלו הוא שקר ואנחנו מקבלים חזרה ערך "אמת". פונקציית חץ מגיעה בלי prototype ולכן נופלת בתנאי הראשון ומחזירה false. זו כמובן לא היתה כוונת המשורר, אבל לזכותם נגיד שעברו 8 שנים והיום הם בטוח מתכננים ממשקים ברורים יותר.