Meneroka Pengaturcaraan Berorientasikan Objek (OOP) dalam JavaScript

Tarikh: 17 Disember 2024

Pengaturcaraan Berorientasikan Objek (OOP) ialah paradigma yang menggunakan objek untuk memodelkan entiti dunia sebenar. JavaScript, sebagai bahasa pengaturcaraan serba boleh, menyediakan sokongan teguh untuk OOP melalui prototaipnya, kelas ES6 dan peningkatan moden. Hari ini, kita akan mendalami prinsip dan ciri OOP dalam JavaScript.

Konsep Teras OOP dalam JavaScript

1. Objek

Objek ialah blok binaan OOP. Dalam JavaScript, objek ialah koleksi pasangan nilai kunci.

Contoh: Mencipta Objek

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

2. Kelas

Kelas ialah cetak biru untuk mencipta objek. Mereka merangkum data dan tingkah laku. JavaScript memperkenalkan kata kunci kelas dalam ES6.

Contoh: Membuat Kelas

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

3. Enkapsulasi

Encapsulation bermaksud menggabungkan data dan kaedah bersama-sama sambil mengehadkan akses terus kepada beberapa komponen. JavaScript mencapai ini menggunakan ahli awam, peribadi dan dilindungi.

Bidang Persendirian

Medan peribadi dilambangkan dengan awalan # dan hanya boleh diakses dalam kelas.

Contoh: Medan Persendirian

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

4. Warisan

Warisan membenarkan satu kelas mewarisi sifat dan kaedah daripada kelas lain menggunakan kata kunci lanjutan.

Contoh: Warisan

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

5. Polimorfisme

Polymorphism membenarkan subkelas untuk mengatasi kaedah daripada kelas induknya untuk menyediakan pelaksanaan tertentu.

Contoh: Penggantian Kaedah

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

6. Abstraksi

Abstraksi memfokuskan pada mendedahkan butiran penting sahaja sambil menyembunyikan kerumitan pelaksanaan. Walaupun JavaScript tidak mempunyai kelas abstrak secara asli, anda boleh mensimulasikannya.

Contoh: Mensimulasikan Abstraksi

class Animal {
  constructor(name) {
    if (this.constructor === Animal) {
      throw new Error("Abstract class cannot be instantiated directly.");
    }
    this.name = name;
  }

  makeSound() {
    throw new Error("Abstract method must be implemented.");
  }
}

class Dog extends Animal {
  makeSound() {
    return "Bark!";
  }
}

const dog = new Dog("Buddy");
console.log(dog.makeSound()); // Output: Bark!
// const animal = new Animal("Some Animal"); // Error: Abstract class cannot be instantiated directly.

7. Prototaip dan Rantaian Prototaip

JavaScript ialah bahasa berasaskan prototaip. Setiap objek mempunyai pautan dalaman ke objek lain yang dipanggil prototaipnya.

Contoh: Rantai Prototaip

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

8. Komposisi Objek lwn. Warisan

Daripada menggunakan warisan, anda boleh mengarang objek dengan menggabungkan fungsi. Pendekatan ini mengelakkan kerumitan hierarki warisan mendalam.

Contoh: Komposisi

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

Prinsip Utama OOP

1. KERING (Jangan Ulangi Sendiri): Gunakan semula kod melalui kelas dan warisan.
2. Prinsip SOLID: Ikuti amalan terbaik untuk menulis kod OOP boleh skala dan boleh diselenggara.

Contoh Dunia Sebenar: Sistem Pengurusan Pengguna

Langkah 1: Tentukan Kelas Asas

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

Langkah 2: Lanjutkan Kefungsian

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

Langkah 3: Buat Kejadian

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

Amalan Tugas

1. Buat hierarki kelas untuk sistem pengurusan perpustakaan.
2. Melaksanakan kelas BankAccount dengan medan peribadi untuk baki dan kaedah awam untuk deposit dan pengeluaran.
3. Tulis kelas Kenderaan dengan subkelas seperti Kereta dan Basikal yang menunjukkan polimorfisme.

Kesimpulan

OOP dalam JavaScript menyediakan cara yang berkesan untuk menulis kod yang bersih, modular dan boleh digunakan semula. Dengan menguasai konsep seperti kelas, warisan, enkapsulasi dan polimorfisme, anda akan dilengkapi dengan baik untuk membina aplikasi berskala. Teruskan bereksperimen dan gunakan konsep ini kepada masalah dunia sebenar untuk mengukuhkan pemahaman anda!

Topik Esok: Kami akan meneroka Pengaturcaraan Asynchronous dalam JavaScript, menyelam jauh ke dalam panggilan balik, janji dan async/menunggu. Nantikan!

Atas ialah kandungan terperinci Meneroka Pengaturcaraan Berorientasikan Objek (OOP) dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!