אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ES20XX » ES2021 private methods

ES2021 private methods

רן בר-זיק פברואר 7, 2021 7:07 am 8 תגובות

ג'אווהסקריפט נעה בעוד צעד אחד קדימה לכיוון תכנות מונחה עצמים

»Promise.any
»Logical Assignment Operator
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

ראשית חשוב להבהיר שג'אווהסקריפט היא לא שפה מונחית עצמים, מה שגויי הים קוראים לו Object oriented. היא Prototype based. מה זה אומר בפועל? הבסיס של ג'אווהסקריפט הוא פרוטוטייפ. כן, הדבר הזה שכל מתכנת ג'אווהסקריפט מנוסה מכיר אם הוא מעלעל בכלי מפתחים. הפרוטוטייפ בגדול אומר שאני יכול ליצור אובייקטים שהם הפרוטוטייפ ועל בסיסים ליצור אובייקטים אחרים. בניגוד לאובייקטים בשפה מונחית עצמים, האובייקטים של ג'אווהסקריפט הם אובייקטים אמיתיים שיש להם זכות קיום. אובייקטים שיורשים מהם מקבלים את התכונות שלהם ישירות.

אני חושב שזו הדוגמה הכי טובה לפרוטוטייפ. הנה  אובייקט1 שהוא הפרוטוטייפ, אובייקט2 שנוצר ממנו. אני משנה בזמן ריצה את הראשון? שיניתי את השני.

const myobj1 = {
  prop1: 'Value of prop1',
  prop2: 'Value of prop2',
  method: () => console.log('method activated'),
}
const myobj2 = Object.create(myobj1);

console.log(myobj2.prop1); // Value of prop1
myobj1.prop1 = 'Muhahahahah';
console.log(myobj2.prop1); // Muhahahahah

אולי המימוש הזה יהיה יותר מוכר לאלו מכם שמכירים את ג'אווהסקריפט. יצירת פונקציה. הפונקציה הזו היא פונקציה בנאית שמקבלת שני ארגומנטים. את הפונקציה הזו, שהיא אובייקט (כל דבר בג'אווהסקריפט הוא אובייקט) אני יכול לשנות בזמן ריצה.

function MyClass(prop1, prop2) {                 
    this.prop1 = prop1;                        
    this.prop2 = prop2;
}

let myClass  = new MyClass(3, 4); // object instantiation ('new' keyword)
console.log(myClass instanceof MyClass); // true
console.log(myClass.prop1); // 3
console.log(myClass.prop2); // 4

MyClass.prototype.multiple = function () {     
    return (this.prop1 * this.prop2);
}

console.log(myClass.multiple()); // 12

ככה ג'אווהסקריפט עובדת מאחורי הקלעים. אין לה קלאסים. יאפ, גם לא ב- ES6.

רגע, מה??? למה לג'אווהסקריפט אין קלאסים???

אבל כן יש לנו קלאסים! אפילו אתה לימדת על קלאסים באתר אז מה זאת אומרת אין לנו קלאסים? בג'אווהסקריפט שהם הקלאסים שאנו מכירים כיום הם בעצם "קיצור" של פרוטוטייפ. קיצור שנקרא סוכר סינטקסטי. syntactic sugar. כשאני יוצר קלאס, אני יוצר בדיוק את מה שיש למעלה. שימו לב. ככה נראה הקלאס שמימשתי עם הפונקציה שלמעלה:

class MyClass { 
    constructor (prop1, prop2) {                 
        this.prop1 = prop1;                        
        this.prop2 = prop2;
    }
    multiple () {
        return (this.prop1 * this.prop2);
    }
}

let myClass  = new MyClass(3, 4); // object instantiation ('new' keyword)
console.log(myClass instanceof MyClass); // true
console.log(myClass.prop1); // 3
console.log(myClass.prop2); // 4
console.log(myClass.multiple()); // 12

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

class MyClass { 
    constructor (prop1, prop2) {                 
        this.prop1 = prop1;                        
        this.prop2 = prop2;
    }
    multiple () {
        return (this.prop1 * this.prop2);
    }
}

let myClass  = new MyClass(3, 4); // object instantiation ('new' keyword)
console.log(myClass instanceof MyClass); // true
console.log(myClass.prop1); // 3
console.log(myClass.prop2); // 4
console.log(myClass.multiple()); // 12
MyClass.prototype.sum = function () {     
    return (this.prop1 + this.prop2);
}
console.log(myClass.sum()); // 7

למה זה עובד? שוב, כי נכון, יש את המילה השמורה class, את המתודה constructor. הכל כמו Java או כמו שפה מתורבתת אחרת אבל בפועל? זה פרוטוטייפ. לא מאמינים? הנה הקוד שלעיל להרצה. הפעילו את כלי המפתחים ותציצו על ה __proto__ נסו לשנות את זה. רוצים צחוקים? תראו את זה למתכנת ג'אווה ותראו אותו מוציא את הגרזן. ועוד לפני שדיברתי שמדובר על דלגציה של מתודות ולא ירושה.

See the Pen Adding method to ES6 Class by Ran Bar-Zik (@barzik-the-vuer) on CodePen.

אז זו הסיבה שאני קצת לא אוהב קלאסים. נכון, הם מארגנים את הקוד וזה באמת נחמד, אבל יוצרים בעיות ביצועים, יש בעיות bind איתם והכי גרוע – הם מרגילים מתכנתים שאמורים לחשוב פרוטוטייפית לחשיבה של קלאסים. ואז כל מיני תפלצות כמו base class וזוועות אחרות. רוצים לתכנת בקלאסים? לכו תתכנתו בג'אווה ותעזבו את ג'אווהסקריפט במנוחה!

ואחרי שסיימתי עם המלטדאון, בואו נתקדם, או קיי? אז יש מתכנתים רבים וטובים שחושבים כמוני אבל אני במיעוט פה, ה-TC39 מקדמים את הקלאסים והפיצ'ר החדש הוא מתודות פרטיות! דבר שלא היה קיים בקלאסים עד כה. אז כלפי אלו שדילגו על כל הערימה הזו, אני מעמיד פנים שמדובר בדבר מהמם ומרגש. אבל אתם, קוראי היקרים שלא דילגו ישר לת'כלס, יודעים שבסתר ליבי אני מתעב את הקלאסים ואת הפיצ'ר הזה. מתעב! 😡😔

אז איך משתמשים בזה

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

class MyClass { 
    constructor (prop1, prop2) {                 
        this.prop1 = prop1;                        
        this.prop2 = prop2;
    }
    multiple () {
        return this.#privateMethod(this.prop1, this.prop2)
    }
    #privateMethod(arg1, arg2) {
      return (this.prop1 * this.prop2);
    }
}

let myClass  = new MyClass(3, 4); // object instantiation ('new' keyword)

console.log(myClass.multiple()); // 12
console.log(myClass.#privateMethod(5, 3)); // Uncaught SyntaxError: Private field '#privateMethod' must be declared in an enclosing class 

מתודות פרטיות מתחילות עם #. כן, זה הכל וזה עובד יפה מאוד.

זה מקרב מאוד את ג'אווהסקריפט לשפה מונחית עצמים. גם לפני כן היו טריקים ליצירת משתנים פרטיים בקלאסים, אבל עכשיו אין שום טריק. הכל מאוד שקוף וגלוי. ניתן להגדיר גם set ו-get עם # לפני ומובן שאפשר לגשת אליהם רק מתוך הקלאס.

See the Pen Adding private method to ES6 Class by Ran Bar-Zik (@barzik-the-vuer) on CodePen.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
es2021

8 תגובות

  1. חזי הגב פברואר 7, 2021 בשעה 8:19 am

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

    • משתמש אנונימי (לא מזוהה) הגב פברואר 11, 2021 בשעה 9:13 am

      שפת הצעצוע הכי נפוצה בעולם. צעצוע מוצלח למדי, יש לציין.

      • משתמש אנונימי (לא מזוהה) הגב מרץ 22, 2021 בשעה 12:57 pm

        java לנצח!!!

    • משתמש אנונימי (לא מזוהה) הגב פברואר 28, 2021 בשעה 7:52 pm

      אם היא לא OOP ולא תוכננה להיות, זה לא אומר שהיא צעצוע. אני באופן אישי מוצא אותה מאוד אפקטיבית וזולה מבחינת זמן פיתוח, בעיקר לאפליקציות קטנות-בינוניות. (בלי לדבר על הכלים המדהימים, התמיכה ברשת והיעדר הפוצים של מונחה עצמים)

  2. Imry Levy Sadan הגב פברואר 7, 2021 בשעה 11:59 am

    אולי כתבת ופספסתי ואולי זו שאלה מטופשת, אבל לאור הביקורת שלך על ה-Classes ב-JS, מה העמדה שלך לגבי Typescript ושימוש בה גם ב-node וגם בריאקט למשל (בכוונה לא כתבתי אנגולר שבה זה כמובן מובנה)

    • משתמש אנונימי (לא מזוהה) הגב פברואר 11, 2021 בשעה 9:13 am

      אתה כלל לא חייב להשתמש בclasses בts.

  3. לי הגב פברואר 7, 2021 בשעה 12:53 pm

    חסר לי המימוש של מתודות פרטיות על ידי transpiler עבור גרסאות קודמות של JS

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

    הטריק שאני השמשתי בו העבר (שהוא לא בדיוק אותו הדבר) הינו להגדיר את הפונקציות הפרטיות בתוך פונקציית מעטפת

    function() {

    function myPrivate() {…}

    class MyClass {…}

    }();

  4. אור כהן הגב יוני 25, 2021 בשעה 6:59 pm

    זה נהדר, באמת.

    מצד שני, זה גם קצת מקרינג' לראות כל מיני @#$^&* בשפה כזו ועוד במשהו שנראה כמו פאטצ'.
    למה לא לכתוב private לפני המתודה?
    לטרנספיילר כל כך קשה לקרוא את זה?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד