קורס JavaScript ES6/7/8 שיעור תרגול מחלקות

דיונים מקורסים
#21

הי,

הקוד הזה עובד:

class Animal {
  isMammal=false;  
}

const x = new Animal();
console.log(x.isMammal);

כלומר בלי המילה var

#22

שלום, אשמח להסבר לגבי שאלה 4. לא ברור לי מה צריכה להכיל המחלקה AutoBind. תודה

#23

הי עדי,
נתחיל בשאלה בחזרה - מה קורה בלעדיה? מה יקרה אם פשוט נריץ את הקוד הזה:

class Counter  {
  constructor(btn) {

    this.btn = btn;
    this.btn.textContent = '0';
    btn.addEventListener('click', this.inc);
  }
  
  inc() {
    this.btn.textContent++;
  }
}

const c = new Counter(document.querySelector('button'));
#24

היי, בלי להגדיר את מחלקה AutoBind לא ניתן לרשת אותה וגם לא לקרוא לsuper, במידה ואני מגדירה אותה ומשאירה את הקונסטרקטור (בנאי) ריק אז מופיעה לי השגיאה Uncaught TypeError: Cannot read properties of undefined (reading ‘textContent’) ואני לא מבינה למה בעצם אם שולחים את הפרמטר של הכפתור כמו בקוד ומגדירים אותו בערך של btn לא ניתן לקרוא ממנו את הtextContent בעצם…

#25

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

class Counter  {
  constructor(btn) {

    this.btn = btn;
    this.btn.textContent = '0';
    btn.addEventListener('click', this.inc);
  }
  
  inc() {
    this.btn.textContent++;
  }
}

const c = new Counter(document.querySelector('button'));

ונניח שאני מריץ אותו עם HTML שיש בו אלמנט מסוג button. מה הקוד אמור לעשות? מה הוא יעשה בפועל?

#26

הקוד אמור להעלות את המספר שעל הכפתור בכל לחיצה. בפועל הפונקציה לא מזהה את הכפתור כי this לא מקושר למחלקה אלא לאובייקט עצמו… הבנתי נכון?

לייק 1
#27

זה הקוד של המחלקה (עכשיו כשזה עובד אני רואה את שם המחלקה וזה נראה הגיוני) , תודה!

class AutoBind{
    constructor(btn){
      this.inc = this.inc.bind(this);
    }
}
#28

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

יש לך רעיון איך להפוך את המחלקה ליותר גנרית?

#29

היי,
אפשר רמז ?
למשל האם נדרש להשתמש ב prototype?

#30

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

class Counter  {
  constructor(btn) {
    super();
    this.bindAll();
    this.btn = btn;
    this.btn.textContent = '0';
    btn.addEventListener('click', this.inc);
  }
  
  inc() {
    this.btn.textContent++;
  }
}

const c = new Counter(document.querySelector('button'));
#31

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

#32

מצאתי איך,
רצים ברפלקשיין ונרשמים על כל הפונקציות הקיימות (למעט מי שלא רלוונטי - למשל קונסטרקטור),

לייק 1
#33

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

#34

ברור,
מפה זה היה פשוט…

#35

היי,
אשמח לקבל הערות-הארות
ביצעתי את תרגיל מספר 1 מעט אחרת, עם תמונות של נורות שמתחלפות לפי הסטטוס ע"י לחיצה על כפתור
ויש לי שאלה: מדוע הערך: this.isON לא מתאתחל עם יצירת האוביקט אלא בפעם הראשונה הוא undefined ? (סידרתי את זה בקוד שיעבוד נכון גם ככה , אבל אשמח לדעת מדוע.)

image
image1691×1031 80 KB

image
image1454×1599 215 KB

#36

הי מלכה

אני רואה שאת משתמשת ב addEventListener בלי bind. יש הסבר מפורט על ההתנהגות שאת רואה בשיעור הזה:
https://www.tocode.co.il/bundles/frontend/lessons/this-and-events?tab=video