Xây dựng đối tượng

Thuộc phần Lập trình hướng đối tượng trong hành trình JavaScript của Coddy. Bài học 49 trên 56.

Giờ bạn đã hiểu các vấn đề của kế thừa sâu và mối quan hệ "có một", hãy cùng tìm hiểu cách tạo đối tượng bằng cách kết hợp các thành phần nhỏ có thể tái sử dụng. Cách tiếp cận này mang lại cho chúng ta sự linh hoạt tối đa!

Mẫu cơ bản:

// Bước 1: Tạo các thành phần nhỏ, mỗi thành phần tập trung vào một nhiệm vụ
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`);
  }
}

// Bước 2: Tạo đối tượng bằng cách kết hợp các thành phần
class Car {
  constructor(brand, enginePower, wheelCount) {
    this.brand = brand;
    this.engine = new Engine(enginePower);    // Có một động cơ
    this.wheels = new Wheels(wheelCount);     // Có các bánh xe
  }
  
  drive() {
    console.log(`${this.brand} is driving:`);
    this.engine.start();
    this.wheels.rotate();
  }
}

// Bước 3: Sử dụng đối tượng (object) được tạo bằng cách kết hợp các thành phần
const myCar = new Car('Toyota', 150, 4);
myCar.drive();
// Đầu ra:
// Toyota đang chạy:
// Động cơ (150HP) đang khởi động...
// 4 bánh xe đang quay

Sức mạnh thực sự: kết hợp các thành phần:

// Các thành phần chuyên biệt hơn
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`);
  }
}

// Tạo nhiều loại xe với các cách kết hợp khác nhau
class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.wheels = new Wheels(4);
    this.turbo = new TurboCharger();      // Xe thể thao có bộ tăng áp
    this.soundSystem = new SoundSystem('Premium'); // Và hệ thống âm thanh chất lượng cao
  }
  
  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);
    // Xe phổ thông không có tăng áp
    this.soundSystem = new SoundSystem('Basic'); // Chỉ có hệ thống âm thanh cơ bản
  }
  
  drive() {
    console.log(`${this.brand} driving efficiently:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}

// Bạn thấy cách này linh hoạt thế nào chưa!
const ferrari = new SportsCar('Ferrari');
const honda = new EconomyCar('Honda');

ferrari.raceMode();  // Có chế độ tăng tốc turbo!
ferrari.cruise();    // Có âm thanh cao cấp!

honda.drive();       // Chỉ có các tính năng cơ bản

Cách tiếp cận này giúp bạn linh hoạt kết hợp các hành vi mà không cần chuỗi kế thừa phức tạp!

Thử thách

Hoàn thiện các phương thức của SmartBulb trong tệp SmartBulb.js.

Triển khai phương thức activate() để bật đèn.
Triển khai phương thức adjustBrightness() để đặt độ sáng và ghi chính xác: Brightness set to ${this.brightness.level}%

Tự làm thử

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