Menu
Coddy logo textTech

בניית אובייקטים

חלק מהיחידה תכנות מונחה עצמים במסלול ה-JavaScript של Coddy. שיעור 49 מתוך 56.

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

התבנית הבסיסית:

// שלב 1: צרו רכיבים קטנים וממוקדים
class Engine {
  constructor(power) {
    this.power = power;
  }
  
  start() {
    console.log(`Engine (${this.power}HP) starting...`);
  }
}

class Wheels {
  constructor(count) {
    this.count = count;
  }
  
  rotate() {
    console.log(`${this.count} wheels rotating`);
  }
}
// שלב 2: בנו אובייקטים באמצעות שילוב רכיבים
class Car {
  constructor(brand, enginePower, wheelCount) {
    this.brand = brand;
    this.engine = new Engine(enginePower);    // יש לו מנוע
    this.wheels = new Wheels(wheelCount);     // יש לו גלגלים
  }
  
  drive() {
    console.log(`${this.brand} is driving:`);
    this.engine.start();
    this.wheels.rotate();
  }
}
// שלב 3: השתמשו באובייקט המורכב
const myCar = new Car('Toyota', 150, 4);
myCar.drive();
// פלט:
// Toyota נוסעת:
// המנוע (150HP) מתניע...
// 4 גלגלים מסתובבים

העוצמה האמיתית: שילוב והתאמה של רכיבים:

// רכיבים ייעודיים יותר
class TurboCharger {
  boost() {
    console.log('Turbo engaged! Extra power!');
  }
}

class SoundSystem {
  constructor(type) {
    this.type = type;
  }
  
  playMusic() {
    console.log(`Playing music on ${this.type} sound system`);
  }
}
// בונים מכוניות שונות עם שילובים שונים
class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.wheels = new Wheels(4);
    this.turbo = new TurboCharger();      // מכונית ספורט מקבלת מגדש טורבו
    this.soundSystem = new SoundSystem('Premium'); // וגם מערכת שמע טובה
  }
  
  raceMode() {
    console.log(`${this.brand} in race mode:`);
    this.engine.start();
    this.turbo.boost();
    this.wheels.rotate();
    console.log('VROOOOM!');
  }
  
  cruise() {
    console.log(`${this.brand} cruising:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}
class EconomyCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(100);
    this.wheels = new Wheels(4);
    // אין טורבו לרכב חסכוני
    this.soundSystem = new SoundSystem('Basic'); // מערכת שמע בסיסית בלבד
  }
  
  drive() {
    console.log(`${this.brand} driving efficiently:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}
// ראו כמה זה גמיש!
const ferrari = new SportsCar('Ferrari');
const honda = new EconomyCar('Honda');

ferrari.raceMode();  // יש לו האצת טורבו!
ferrari.cruise();    // יש לו מערכת שמע איכותית!

honda.drive();       // רק תכונות בסיסיות

הגישה הזו מעניקה לך גמישות לשלב בין התנהגויות שונות בלי שרשראות ירושה מורכבות!

challenge icon

אתגר

השלימו את המתודות של SmartBulb בקובץ SmartBulb.js.

  1. ממשו את המתודה activate() כדי להדליק את האור.
  2. ממשו את המתודה adjustBrightness() כדי להגדיר את הבהירות ולתעד בדיוק: Brightness set to ${this.brightness.level}%

נסו בעצמכם

import { SmartBulb } from './SmartBulb.js';

const bedroomLight = new SmartBulb('warm white');

console.log('1. Activating light:');
bedroomLight.activate();

console.log('\n2. Adjusting brightness:');
bedroomLight.adjustBrightness(75);
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה תכנות מונחה עצמים

תרגלו בעצמכם: קומפיילר JavaScript אונליין