Lập trình hướng đối tượng trong javascript

Lập trình hướng đối tượng (Object-Oriented Programming - OOP) trong JavaScript có thể được thực hiện bằng cách sử dụng lớp (class) và đối tượng (object).

  1. Tại sao sử dụng lập trình hướng đối tượng javascript
  2. Các khái niệm cơ bản trong OOP với JavaScript
  3. Ví dụ trong lập trình hướng đối tượng javascript
  4. Video thực hành lập trình hướng đối tượng Javascript

JavaScript hỗ trợ cú pháp class, giúp việc viết mã hướng đối tượng OOP dễ dàng và rõ ràng hơn.

1. Tại sao sử dụng lập trình hướng đối tượng javascript

Sử dụng lập trình hướng đối tượng (OOP) trong JavaScript mang lại nhiều lợi ích, đặc biệt khi bạn phát triển các ứng dụng phức tạp hoặc cần tổ chức mã tốt hơn. Tái sử dụng mã, dễ bảo trì, mở rộng dễ dàng, gần gũi với thực tếquan hệ trong thế giới thực.   

Tổ chức mã tốt hơn

    Vấn đề: Khi dự án lớn dần, việc quản lý mã trong một file hoặc với các hàm đơn lẻ trở nên khó khăn.
    Giải pháp: OOP giúp chia chương trình thành các class và object, mỗi class đảm nhận một vai trò cụ thể. Điều này làm cho mã dễ đọc, dễ duy trì và dễ mở rộng.

Ví dụ:

// Không dùng OOP

const user1 = { name: "Alice", age: 25 };

const user2 = { name: "Bob", age: 30 };



function greet(user) {

  console.log(`Hello, ${user.name}`);

}



// Dùng OOP

class User {

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }



  greet() {

    console.log(`Hello, ${this.name}`);

  }

}



const user1 = new User("Alice", 25);

const user2 = new User("Bob", 30);

user1.greet(); // Hello, Alice

Tái sử dụng mã (Reusability)

OOP cho phép tái sử dụng các class hoặc phương thức qua tính kế thừa (inheritance). Điều này rất hữu ích khi có các thành phần chung giữa các đối tượng.

Ví dụ:

class Animal {

  constructor(name) {

    this.name = name;

  }



  speak() {

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

  }

}



class Dog extends Animal {

  speak() {

    console.log(`${this.name} barks.`);

  }

}



const dog = new Dog("Buddy");

dog.speak(); // Buddy barks.


    Lợi ích: Bạn không cần viết lại logic của speak từ đầu; lớp con chỉ mở rộng lớp cha.

Dễ bảo trì và mở rộng

    Khi thêm tính năng mới, bạn có thể mở rộng các class hiện có thay vì sửa đổi mã cũ. Điều này giảm nguy cơ tạo ra lỗi.
    Mô hình OOP cho phép phân tách rõ ràng giữa các thành phần, giúp bảo trì và sửa lỗi dễ dàng hơn.

Đóng gói dữ liệu (Encapsulation)

    Vấn đề: Dữ liệu nhạy cảm hoặc logic bên trong đối tượng không nên được truy cập trực tiếp từ bên ngoài.
    Giải pháp: Encapsulation ẩn dữ liệu và chỉ cung cấp các phương thức cần thiết để tương tác với dữ liệu đó.

Ví dụ:

class BankAccount {

  #balance; // Thuộc tính riêng (private)



  constructor(initialBalance) {

    this.#balance = initialBalance;

  }



  deposit(amount) {

    this.#balance += amount;

    return `Deposited ${amount}. Current balance: ${this.#balance}`;

  }



  getBalance() {

    return this.#balance;

  }

}



const account = new BankAccount(1000);

console.log(account.deposit(500)); // Deposited 500. Current balance: 1500

console.log(account.getBalance()); // 1500

// console.log(account.#balance); // Lỗi: Không thể truy cập thuộc tính private

Phù hợp với ứng dụng lớn (Scalability)

    OOP là nền tảng của nhiều framework JavaScript phổ biến như React, Angular hay Vue. Khi làm việc với ứng dụng lớn, sử dụng OOP giúp tổ chức mã rõ ràng hơn.
    Các ứng dụng như game, trình quản lý dữ liệu phức tạp (CRM, ERP), hay hệ thống web đều có thể được thiết kế tốt hơn với OOP.

Gần gũi với thực tế (Real-World Modeling)

OOP cho phép mô phỏng các đối tượng trong thế giới thực bằng các class. Mỗi class đại diện cho một đối tượng với thuộc tính và hành vi riêng.

Ví dụ: Một cửa hàng có các đối tượng Product, Customer, và Order:

class Product {

  constructor(name, price) {

    this.name = name;

    this.price = price;

  }



  getDetails() {

    return `${this.name}: $${this.price}`;

  }

}



class Customer {

  constructor(name) {

    this.name = name;

  }



  purchase(product) {

    console.log(`${this.name} bought ${product.getDetails()}`);

  }

}



const product = new Product("Laptop", 1500);

const customer = new Customer("John");

customer.purchase(product); // John bought Laptop: $1500

2. Các khái niệm cơ bản trong OOP với JavaScript

    Class và Object

        Class là một "khuôn mẫu" để tạo ra các đối tượng.
        Object là thực thể cụ thể được tạo ra từ class.

    Constructor

        Hàm khởi tạo (constructor) dùng để gán các giá trị ban đầu cho đối tượng.

    Thuộc tính và Phương thức

        Thuộc tính là các đặc điểm của đối tượng.
        Phương thức là các hành động mà đối tượng có thể thực hiện.

    Tính kế thừa (Inheritance)

        Một lớp có thể kế thừa các thuộc tính và phương thức từ một lớp khác.

    Đóng gói (Encapsulation)

        Giới hạn quyền truy cập vào dữ liệu bên trong đối tượng.

    Đa hình (Polymorphism)

        Cho phép lớp con định nghĩa lại các phương thức của lớp cha.

3. Ví dụ trong lập trình hướng đối tượng javascript

Tạo Class và Object

class Person {

  // Hàm khởi tạo

  constructor(name, age) {

    this.name = name; // Thuộc tính

    this.age = age;

  }



  // Phương thức

  introduce() {

    return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;

  }

}



// Tạo đối tượng từ class

const person1 = new Person("John", 25);

console.log(person1.introduce()); // Output: Hi, I'm John and I'm 25 years old.

Tính kế thừa

class Animal {

  constructor(name) {

    this.name = name;

  }



  sound() {

    return `${this.name} makes a sound.`;

  }

}



// Kế thừa từ Animal

class Dog extends Animal {

  sound() {

    return `${this.name} barks!`;

  }

}



const myDog = new Dog("Buddy");

console.log(myDog.sound()); // Output: Buddy barks!

Đóng gói (Encapsulation) với thuộc tính riêng (Private)

Từ ES2022, JavaScript hỗ trợ thuộc tính riêng bằng cách sử dụng #:

class BankAccount {

  #balance; // Thuộc tính riêng



  constructor(initialBalance) {

    this.#balance = initialBalance;

  }



  deposit(amount) {

    this.#balance += amount;

    return `Deposited ${amount}. Current balance: ${this.#balance}`;

  }



  withdraw(amount) {

    if (amount > this.#balance) {

      return "Insufficient funds.";

    }

    this.#balance -= amount;

    return `Withdrawn ${amount}. Current balance: ${this.#balance}`;

  }

}



const account = new BankAccount(1000);

console.log(account.deposit(500)); // Output: Deposited 500. Current balance: 1500

console.log(account.withdraw(2000)); // Output: Insufficient funds.

Đa hình (Polymorphism)

class Shape {

  calculateArea() {

    return "Area calculation not implemented for this shape.";

  }

}



class Circle extends Shape {

  constructor(radius) {

    super(); // Gọi hàm khởi tạo của lớp cha

    this.radius = radius;

  }



  calculateArea() {

    return Math.PI * this.radius * this.radius;

  }

}



class Rectangle extends Shape {

  constructor(width, height) {

    super();

    this.width = width;

    this.height = height;

  }



  calculateArea() {

    return this.width * this.height;

  }

}



const shapes = [new Circle(5), new Rectangle(10, 20)];



shapes.forEach((shape) => {

  console.log(shape.calculateArea());

});

// Output:

// 78.53981633974483 (diện tích hình tròn)

// 200 (diện tích hình chữ nhật)

4. Video thực hành lập trình hướng đối tượng Javascript

Đang cập nhật ...

 

 

Tìm kiếm:

Bài viết liên quan:

Lập trình hướng đối tượng (Object-Oriented Programming - OOP) trong JavaScript có thể được thực hiện bằng cách sử dụng lớp (class) và đối tượng (object).

Thiết kế website
0935999617
0935999617