[Advanced JS] Lập trình hướng đối tượng (OOP) trong JavaScript: Khái niệm & Ví dụ

Chắc hẳn bạn đã từng nghe đến "Lập trình hướng đối tượng" hay OOP, một khái niệm nền tảng trong thế giới phát triển phần mềm. Nhưng OOP trong JavaScript thì sao? Liệu một ngôn ngữ linh hoạt và đa mô hình như JavaScript có thực sự "hướng đối tượng"? Câu trả lời là có, và việc nắm vững OOP trong JavaScript không chỉ giúp bạn viết mã nguồn sạch sẽ, dễ bảo trì hơn mà còn mở ra cánh cửa để xây dựng các ứng dụng phức tạp và có quy mô lớn một cách hiệu quả.

Bài viết này sẽ giúp bạn khám phá thế giới OOP trong JavaScript một cách trực quan và dễ hiểu nhất, từ những khái niệm cơ bản đến các ví dụ thực tế.

Lập trình hướng đối tượng (OOP) là gì?

Lập trình hướng đối tượng (Object-Oriented Programming) là một mô hình lập trình dựa trên khái niệm về "đối tượng" (objects). Hãy tưởng tượng mỗi đối tượng trong đời thực (như xe hơi, con người, ngôi nhà) đều có những đặc điểm (thuộc tính) và hành động (phương thức) riêng. OOP cũng mô phỏng y hệt như vậy trong thế giới mã lệnh.

• Đối tượng (Object): Là một thể hiện cụ thể, chứa cả dữ liệu (thuộc tính) và các hành vi (phương thức) để thao tác trên dữ liệu đó. Ví dụ, một đối tượng car có thể có các thuộc tính như color, brand và các phương thức như drive(), stop().
• Lớp (Class): Là một bản thiết kế hay khuôn mẫu (blueprint) để tạo ra các đối tượng. Từ một lớp Car, chúng ta có thể tạo ra nhiều đối tượng xe hơi khác nhau. Kể từ phiên bản ES6, JavaScript đã chính thức giới thiệu cú pháp class để việc này trở nên quen thuộc hơn với các lập trình viên từ ngôn ngữ khác.

Mục tiêu chính của OOP là gói gọn dữ liệu và các hàm xử lý dữ liệu đó vào cùng một nơi, giúp cho mã nguồn trở nên có tổ chức, dễ quản lý và có khả năng tái sử dụng cao.

Nguyên tắc cốt lõi của OOP - Áp dụng trong JavaScript

Lập trình hướng đối tượng được xây dựng trên bốn nguyên tắc chính. Hiểu rõ bốn nguyên tắc này là chìa khóa để bạn áp dụng OOP một cách hiệu quả trong các dự án JavaScript của mình.

1. Tính đóng gói (Encapsulation) 💊

Đây là nguyên tắc gói gọn dữ liệu và các phương thức xử lý dữ liệu đó vào trong một đối tượng duy nhất, đồng thời che giấu những chi tiết triển khai phức tạp bên trong. Điều này giúp bảo vệ dữ liệu khỏi những truy cập và thay đổi không mong muốn từ bên ngoài.

Trong JavaScript, chúng ta có thể đạt được tính đóng gói thông qua closures hoặc sử dụng các private field với cú pháp # trong ES2022.

Ví dụ: Sử dụng Private Fields (#).

class Phone {
  #password // Đây là một private field

  constructor(name, password) {
    this.name = name
    this.#password = password
  }

  // Public method để kiểm tra mật khẩu
  checkPassword(inputPassword) {
    if (inputPassword === this.#password) {
      console.log('Mở khóa thành công!')
      return true
    } else {
      console.log('Sai mật khẩu!')
      return false
    }
  }
}

const iphone = new Phone('iPhone 15', '123456')
console.log(iphone.name) // "iPhone 15"
// console.log(iphone.#password); // Lỗi! Không thể truy cập từ bên ngoài

iphone.checkPassword('111111') // Sai mật khẩu!
iphone.checkPassword('123456') // Mở khóa thành công!

2. Tính trừu tượng (Abstraction) 🎭

Tính trừu tượng tập trung vào việc hiển thị những tính năng cần thiết của một đối tượng ra bên ngoài và ẩn đi những chi tiết hoạt động phức tạp bên trong. Giống như khi bạn lái xe, bạn chỉ cần quan tâm đến vô lăng, chân ga, chân phanh mà không cần biết động cơ, piston hoạt động ra sao.

Trong JavaScript, tính trừu tượng đạt được bằng cách tạo ra một giao diện đơn giản (public method) để tương tác với đối tượng, trong khi logic phức tạp được ẩn đi.

Ví dụ: Ẩn các logic phức tạp.

class CoffeeMachine {
  #clean() {
    console.log('Đang tự động làm sạch máy...') // Auto cleaning the machine...
  }

  #boilWater() {
    console.log('Đang đun sôi nước...') // Boiling water...
  }

  brewCoffee() {
    this.#boilWater()
    console.log('Đang xay hạt cà phê...') // Grinding coffee beans...
    console.log('Pha cà phê Espresso!') // Brewing Espresso coffee!
    this.#clean()
  }
}

const machine = new CoffeeMachine()
machine.brewCoffee() // Người dùng chỉ cần gọi phương thức này
// Họ không thể gọi machine.#boilWater() hay machine.#clean()

3. Tính kế thừa (Inheritance) 👨‍👩‍👧

Tính kế thừa cho phép một lớp (lớp con) có thể thừa hưởng lại các thuộc tính và phương thức từ một lớp khác (lớp cha). Điều này giúp tái sử dụng mã nguồn một cách tối đa và tạo ra một hệ thống phân cấp logic giữa các lớp.

JavaScript sử dụng kế thừa dựa trên prototype, nhưng cú pháp class của ES6 đã cung cấp một cách dễ dàng và quen thuộc hơn để thực hiện việc này bằng từ khóa extends và super.

Ví dụ: Cú pháp quen thuộc với class, extends và super.

// Lớp cha
class Animal {
  constructor(name) {
    this.name = name
  }

  eat() {
    console.log(`${this.name} đang ăn.`) // ...đang ăn.
  }
}

// Lớp con kế thừa từ Animal
class Dog extends Animal {
  constructor(name, breed) {
    super(name) // Gọi constructor của lớp cha
    this.breed = breed
  }

  bark() {
    console.log('Gâu! Gâu!') // Woof! Woof!
  }
}

const milu = new Dog('Milu', 'Corgi')
milu.eat() // "Milu đang ăn." (Kế thừa từ Animal)
milu.bark() // "Gâu! Gâu!" (Phương thức riêng của Dog)

4. Tính đa hình (Polymorphism) 🦎

"Poly" có nghĩa là nhiều, và "morph" có nghĩa là hình dạng. Đa hình là khả năng các đối tượng khác nhau có thể phản ứng lại cùng một thông điệp (lời gọi phương thức) theo những cách khác nhau. Điều này cho phép chúng ta viết mã nguồn linh hoạt và dễ mở rộng hơn.

Thường thì tính đa hình được thể hiện qua việc ghi đè phương thức (Method Overriding), nơi lớp con cung cấp một triển khai cụ thể cho một phương thức đã có ở lớp cha.

Ví dụ:

class Shape {
  draw() {
    console.log('Vẽ một hình vẽ chung.')
  }
}

class Circle extends Shape {
  // Ghi đè phương thức draw() của lớp cha
  draw() {
    console.log('Vẽ một hình tròn 🔵.')
  }
}

class Square extends Shape {
  // Ghi đè phương thức draw() của lớp cha
  draw() {
    console.log('Vẽ một hình vuông 🟪.')
  }
}

function drawShape(shape) {
  shape.draw()
}

const circle = new Circle()
const square = new Square()

drawShape(circle) // "Vẽ một hình tròn 🔵."
drawShape(square) // "Vẽ một hình vuông 🟪."

Trong ví dụ trên, hàm drawShape có thể làm việc với bất kỳ đối tượng nào là Shape hoặc kế thừa từ nó, và lời gọi shape.draw() sẽ tự động thực thi đúng phương thức của đối tượng cụ thể được truyền vào.

Tại sao nên sử dụng OOP trong JavaScript?

Việc áp dụng các nguyên tắc OOP vào dự án JavaScript mang lại rất nhiều lợi ích thiết thực:

• Tổ chức mã nguồn tốt hơn: OOP giúp cấu trúc các dự án lớn, chia nhỏ chúng thành các đối tượng có thể quản lý được, làm cho mã nguồn trở nên rõ ràng và dễ hiểu hơn.
• Tái sử dụng code: Với tính kế thừa, bạn có thể tái sử dụng các thuộc tính và phương thức từ các lớp đã có, giảm thiểu việc lặp lại code và tiết kiệm thời gian phát triển.
• Dễ dàng bảo trì và mở rộng: Nhờ tính đóng gói, việc thay đổi logic bên trong một đối tượng sẽ không ảnh hưởng đến các phần khác của ứng dụng. Việc thêm các tính năng mới cũng trở nên đơn giản hơn bằng cách tạo các lớp mới kế thừa từ các lớp hiện có.
• Mô phỏng thế giới thực: OOP cho phép bạn mô hình hóa các vấn đề trong thế giới thực thành các đối tượng trong mã lệnh, giúp quá trình giải quyết vấn đề trở nên tự nhiên và trực quan hơn.

Kết luận: OOP là một tư duy bài bản và hiệu quả

Lập trình hướng đối tượng không chỉ là một tập hợp các quy tắc mà là một tư duy, một phương pháp tiếp cận để xây dựng phần mềm một cách bài bản và hiệu quả.

Mặc dù JavaScript là một ngôn-ngữ đa-mô-hình, việc áp dụng OOP, đặc biệt với cú pháp class hiện đại của ES6, sẽ trang bị cho bạn một công cụ mạnh mẽ để giải quyết các bài toán phức tạp, xây dựng các ứng dụng có cấu trúc bền vững và sẵn sàng cho việc mở rộng trong tương lai. Hãy bắt đầu áp dụng những nguyên tắc này vào dự án tiếp theo của bạn và cảm nhận sự khác biệt!