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

ECMAScript 6 – קלאסים בקלאסה

רן בר-זיק אוקטובר 23, 2016 7:07 am תגובה אחת

יצירת מחלקה, מתודות וירושה והכל ב-JavaScript. הייתם מאמינים?

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

אני ממש מצטער על הכותרת הצ'יזית וה'הו-כה-מתוחכמת', אבל לא יכולתי לעמוד בפיתוי. אחד הדברים היפים ב-ECMAScript 6 הוא הטיפול המקיף ב-class. למי שלא יודע, JavaScript היא לא ממש שפה מונחית עצמים אלא שפה מבוססת פרוטוטייפ. דבר שהקשה מעט על מימוש של עצמים. למרות שלא מעט מתכנתים אכן כתבו, או ניסו לכתוב קלאסים ויצא לכולנו קצת עקום. וכשאני אומר עקום אני מתכוון למשהו כזה:


"use strict";

function Book(title) {
  this.title = title; //Public property.
  var isCurrentlyReading = false; //Private property.

  this.start = function() { //Privileged method .
    this.isCurrentlyReading = true;
    return this.isCurrentlyReading;
  };

}

Book.prototype.stop = function stop() { //Define public method by prototype.
  this.isCurrentlyReading = false;
};

var theShining = new Book('The Shining'); //Instance of the object.

console.log(theShining.title); //Return "The Shining".

var result = theShining.start();

console.log(result); //Return true.

See the Pen ECMAScript 5 Class by Ran Bar-Zik (@barzik) on CodePen.

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

אבל מה? זה ברדק. ברדק להגדיר את זה, ברדק להבין את זה. ב-ECMAScript 6 מאוד קל להגדיר קלאס. אבל ממש. שימו לב:


"use strict";

class Book {
  constructor(title) {
    this.title = title;
    this.isCurrentlyReading = false;
  }

  start() { //Public method.
    this.isCurrentlyReading = true;
    return this.isCurrentlyReading;
  }

  stop() { //Public property.
    this.isCurrentlyReading = false;
  }
}

var theShining = new Book('The Shining'); //Instance of the object.

console.log(theShining.title); //Return "The Shining".

var result = theShining.start();

console.log(result); //Return true.

אני לא חושב שאפשר להסביר יותר. אחת החולשות הגדולות כאן שאין פה private.

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


"use strict";

class Book {
  constructor(title) {
    this.title = title;
    this.isCurrentlyReading = false;
  }

  start() { //Public method.
    this.isCurrentlyReading = true;
    return this.isCurrentlyReading;
  }

  stop() { //Public property.
    this.isCurrentlyReading = false;
  }
}

class HorrorBook extends Book {
  scream() { //Public method.
    this.scream = true;
    return this.scream;
  }
}

var theShining = new HorrorBook('The Shining'); //Instance of the object.

console.log(theShining.scream()); //Return true.

console.log(theShining.title); //Return "The Shining".

See the Pen ECMAScript 6 – Class – inheritance by Ran Bar-Zik (@barzik) on CodePen.

ממש כמו בשפות אמיתיות, אנחנו יכולים להשתמש ב-super על מנת לקרוא למתודות של ההורה. הנה דוגמה:


"use strict";

class Book {
  constructor(title) {
    this.title = title;
    this.isCurrentlyReading = false;
  }

  start() { //Public method.
    this.isCurrentlyReading = true;
    console.log('Start in base class.')
    return this.isCurrentlyReading;
  }

  stop() { //Public property.
    this.isCurrentlyReading = false;
  }
}

class HorrorBook extends Book {
  scream() { //Public method.
    this.scream = true;
    super.start(); //Will call to parent start.
    return this.scream;
  }
}

var theShining = new HorrorBook('The Shining'); //Instance of the object.

console.log(theShining.scream()); //Print start in base class and then true.

console.log(theShining.title); //Return "The Shining".

הנה, תראו בעצמכם:

See the Pen ECMAScript 6 – Class – inheritance + super by Ran Bar-Zik (@barzik) on CodePen.

בנוסף, אנחנו יכולים להכריז על תכונות סטטיות – כלומר כאלו שמשתמשים בהן ללא instance של האובייקט (זה ה-new) :


"use strict";

class Book {
  constructor(title) {
    this.title = title;
    this.isCurrentlyReading = false;
  }

  start() { //Public method.
    this.isCurrentlyReading = true;
    console.log('Start in base class.')
    return this.isCurrentlyReading;
  }

  stop() { //Public property.
    this.isCurrentlyReading = false;
  }
  
  static throw() { //Static public method.
    console.log('Throw it!');
  }
}

Book.throw(); //Look ma! without instance.

See the Pen ECMAScript 6 – Class -static by Ran Bar-Zik (@barzik) on CodePen.

חושבים שזה הכל? יש גם set ו-get לתכונות של הקלאס. המתודות המיוחדות האלו מאפשרות לנו לעשות ולידציות/שינויים בכל השמה של משתנים. הנה דוגמה:


// ES6 get and set
class Person {
    constructor(name) {
        this._name = name;
    }
  
    get name() {
        return this._name.toUpperCase();
    }
  
    set name(newName) {
        this._name = newName;   // Validation could be checked here such as only allowing non numerical values.
    }
  
    walk() {
        console.log(this._name + ' is walking.');
    }
}
         
let bob = new Person('Bob');
console.log(bob.name);  // Outputs 'BOB', because it is running throught get.

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

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

תגובה אחת

  1. Islam Attrash הגב אוקטובר 23, 2016 בשעה 2:09 pm

    הי רן,
    תודה על המאמר המעולה.

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

    כייף לכנס לטייפסקריפט לפרויקטים גדולים ושלבי המעבר הם פשוט קלים! וכל הפריימוורקים הגדולים עוברים לתייפים, כמו אנגולר2, וריאקט (עם flowjs) וזה מה שחסר הגאפאסקריפט

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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