Pengaturcaraan Berorientasikan Objek (OOP) dalam JavaScript: Panduan Komprehensif

Pengaturcaraan Berorientasikan Objek (OOP) dalam JavaScript

---

1. Objek dan Kelas

Dalam JavaScript, objek ialah koleksi pasangan nilai kunci (sifat dan kaedah). Kelas berfungsi sebagai pelan tindakan untuk mencipta objek.

Contoh:

// Define a class
class Person {
  constructor(name, age) {
    this.name = name; // Property
    this.age = age;
  }

  greet() { // Method
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Create an object
const person1 = new Person('Alice', 25);
person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.

---

2. Encapsulation

Encapsulation bermaksud menggabungkan data (sifat) dan kaedah yang memanipulasi data di dalam satu unit (objek). Ia mengehadkan akses terus ke bahagian tertentu objek.

Contoh:

class BankAccount {
  #balance; // Private field

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

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

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

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // Error: Private field '#balance' not accessible

---

3. Warisan

Warisan membenarkan kelas mewarisi sifat dan kaedah daripada kelas lain. Ia membantu menggunakan semula kod sedia ada.

Contoh:

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // Output: Buddy barks.

---

4. Polimorfisme

Polymorphism bermaksud mempunyai pelbagai bentuk. Dalam OOP, ia membenarkan kaedah dalam kelas kanak-kanak mempunyai nama yang sama seperti kaedah dalam kelas induk tetapi berkelakuan berbeza.

Contoh:

class Shape {
  area() {
    return 0;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }
  area() {
    return this.width * this.height;
  }
}

const shape = new Shape();
const rectangle = new Rectangle(10, 5);

console.log(shape.area());       // 0
console.log(rectangle.area());   // 50

---

5. Abstraksi

Abstraksi menyembunyikan kerumitan kod dan hanya menunjukkan bahagian penting kepada pengguna.

Contoh:

class Vehicle {
  startEngine() {
    console.log('Engine started');
  }
}

class Car extends Vehicle {
  drive() {
    console.log('Driving the car...');
  }
}

const car = new Car();
car.startEngine(); // Engine started
car.drive();       // Driving the car...

---

6. Kaedah dan Sifat Statik

Kaedah dan sifat statik kepunyaan kelas itu sendiri, bukan kejadian.

Contoh:

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3)); // 8

---

7. Prototaip

JavaScript menggunakan model pewarisan berasaskan prototaip, di mana objek boleh mewarisi sifat dan kaedah daripada objek lain.

Contoh:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('Alice');
person.greet(); // Hello, my name is Alice

---

Pengambilan Utama

1. Gunakan kelas untuk membuat cetak biru bagi objek.
2. Enkapsulasi sifat dengan medan peribadi menggunakan #.
3. Gunakan warisan (lanjutkan) untuk menggunakan semula kod.
4. Timpa kaedah untuk polimorfisme.
5. Permudahkan interaksi dengan abstraksi.
6. Manfaatkan kaedah statik dan pewarisan prototaip.

Ciri OOP JavaScript membolehkan pembangun menulis kod bersih, modular dan boleh digunakan semula.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

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