Membangun object

Termasuk bagian Pemrograman Berorientasi Objek dalam perjalanan JavaScript di Coddy. Pelajaran 49 dari 56.

Sekarang setelah kita memahami masalah pada pewarisan yang mendalam dan hubungan "has-a", mari pelajari cara membangun object dengan menggabungkan komponen kecil yang dapat digunakan kembali. Pendekatan ini memberi kita fleksibilitas maksimal!

Pola Dasar:

// Langkah 1: Buat komponen kecil yang berfokus pada satu tugas
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`);
  }
}

// Langkah 2: Bangun object dengan menggabungkan komponen
class Car {
  constructor(brand, enginePower, wheelCount) {
    this.brand = brand;
    this.engine = new Engine(enginePower);    // MEMILIKI engine
    this.wheels = new Wheels(wheelCount);     // MEMILIKI wheels
  }
  
  drive() {
    console.log(`${this.brand} is driving:`);
    this.engine.start();
    this.wheels.rotate();
  }
}

// Langkah 3: Gunakan object yang tersusun
const myCar = new Car('Toyota', 150, 4);
myCar.drive();
// Output:
// Toyota sedang melaju:
// Mesin (150HP) mulai menyala...
// 4 roda berputar

Kekuatan Sebenarnya: Padu Padankan Komponen:

// Komponen yang lebih khusus
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`);
  }
}

// Buat berbagai mobil dengan kombinasi berbeda
class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.wheels = new Wheels(4);
    this.turbo = new TurboCharger();      // Mobil sport mendapat turbo
    this.soundSystem = new SoundSystem('Premium'); // Dan sistem audio yang bagus
  }
  
  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);
    // Mobil ekonomis tidak memiliki turbo
    this.soundSystem = new SoundSystem('Basic'); // Hanya suara dasar
  }
  
  drive() {
    console.log(`${this.brand} driving efficiently:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}

// Lihat betapa fleksibelnya ini!
const ferrari = new SportsCar('Ferrari');
const honda = new EconomyCar('Honda');

ferrari.raceMode();  // Punya tenaga turbo!
ferrari.cruise();    // Punya sistem audio premium!

honda.drive();       // Hanya fitur dasar

Pendekatan ini memberimu fleksibilitas untuk memadukan perilaku tanpa rantai pewarisan yang rumit!

Tantangan

Lengkapi method SmartBulb di file SmartBulb.js.

Implementasikan method activate() untuk menyalakan lampu.
Implementasikan method adjustBrightness() untuk mengatur kecerahan dan mencatat persis: Brightness set to ${this.brightness.level}%

Coba sendiri

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);