JavaScript Class

Bài này mình cùng tìm hiểu Class trong Javascript nó là gì nhé. Từ khi được giới thiệu trong ES6 (ECMAScript 2015), Class đã trở thành một tính năng không thể thiếu khi phát triển ứng dụng JavaScript theo hướng đối tượng.

1. Class là gì?

Class trong JavaScript giúp ra các object có cùng thuộc tinh và phương thức nhất định. Đồng thời tăng tính tái sử dụng code và dễ dàng quản lí hơn

2. Tạo Class đầu tiên với User

Chúng ta ví dụ tạo 1 class User, đại diện cho một người dùng trong hệ thống nhé.

class User {
  constructor(hoTen) {
    // this.name: thuộc tính của đối tượng
    // hoTen: tham số truyền vào constructor
    this.name = hoTen;
  }

  // Phương thức
  greet() {
    return `Xin chào, tôi là ${this.name}`;
  }
}

// Tạo các object (instance) từ class User
const user1 = new User("TuPV");
const user2 = new User("VuPV");

console.log(user1.greet()); // Xin chào, tôi là TuPV
console.log(user2.greet()); // Xin chào, tôi là VuPV

3. Kế thừa Class với Admin

Giả sử bạn muốn có một loại người dùng đặc biệt — đó là Admin (quản trị viên). Admin cũng là một User, nhưng có thêm quyền hạn (permissions) riêng biệt. Lúc này, bạn có thể kế thừa từ class User để tạo ra class Admin.

class Admin extends User {
  constructor(hoTen, quyenHan) {
    super(hoTen); // Gọi constructor của class cha (User) để khởi tạo this.name
    this.role = "Admin";
    this.permissions = quyenHan; // mảng các quyền
  }

  // Ghi đè phương thức greet
  greet() {
    // Gọi lại phương thức greet của class cha và mở rộng nội dung
    return (
      super.greet() +
      ` Tôi là quản trị viên có quyền: ${this.permissions.join(", ")}`
    );
  }

  // Thêm phương thức riêng của Admin
  hasPermission(quyen) {
    return this.permissions.includes(quyen);
  }
}

const admin1 = new Admin("Admin TuPV", ["create", "delete", "update"]);

console.log(admin1.greet()); // Xin chào, tôi là Admin TuPV Tôi là quản trị viên có quyền: create, delete, update
console.log(admin1.hasPermission("delete")); // true
console.log(admin1.hasPermission("read")); // false

4. Tại sao nên sử dụng Class và kế thừa?

• Tổ chức mã nguồn tốt hơn khi ứng dụng phát triển lớn.
• Tái sử dụng code thông qua kế thừa (extends).
• Dễ mở rộng: Bạn có thể thêm nhiều loại người dùng khác nhau (Admin, Editor, Guest…) mà không phải viết lại logic chung.

5. Tổng kết

• class là cách hiện đại để định nghĩa và tổ chức code theo hướng đối tượng.
• constructor giúp khởi tạo dữ liệu ban đầu cho đối tượng.
• extends dùng để kế thừa từ class khác, tái sử dụng logic và mở rộng chức năng.
• super() gọi constructor của class cha.

6. Từ khóa static là gì?

Từ khóa static trong JavaScript được dùng để định nghĩa phương thức hoặc thuộc tính tĩnh cho class. Điều đặc biệt là các phương thức/thuộc tính static không thể gọi từ object (instance), mà phải gọi trực tiếp từ class.

Nói cách khác, static thường được dùng cho các hành vi hoặc thông tin chung mà không phụ thuộc vào dữ liệu cụ thể của một object.

Ví dụ:

class User {
  constructor(hoTen) {
    this.name = hoTen;
  }

  greet() {
    return `Xin chào, tôi là ${this.name}`;
  }

  test() {
    console.log(this.sayHello());
  }

  // Phương thức static
  static sayHello() {
    return "Chào mừng bạn đến với hệ thống!";
  }
}

const userTest = new User("TuPV");

console.log(userTest.greet()); // Xin chào, tôi là TuPV
console.log(User.sayHello()); // Chào mừng bạn đến với hệ thống!
console.log(userTest.sayHello()); // error: userTest.sayHello is not a function
console.log(User.test()); // error: User.test is not a function vì static method không thể gọi từ instance

⚠️ Gọi userTest.sayHello() sẽ bị lỗi vì sayHello là static method và chỉ có thể gọi qua class User.

Bạn cũng có thể dùng static trong class con kế thừa từ class cha:

class Admin extends User {
  constructor(hoTen, quyenHan) {
    super(hoTen);
    this.permissions = quyenHan;
  }

  greet() {
    return `${super.greet()} Tôi là Admin.`;
  }

  static getRoleName() {
    return "Quản trị viên";
  }
}

console.log(Admin.getRoleName()); // Quản trị viên

7. Khi nào nên dùng static?

• Khi bạn muốn tạo các hàm tiện ích dùng chung, ví dụ như kiểm tra dữ liệu đầu vào, định dạng chuỗi, kiểm tra quyền truy cập…
• Khi bạn không cần truy cập đến this của từng object.
• Khi bạn muốn lưu biến dùng chung cho toàn bộ class, không gắn với từng instance.

8. Tổng kết thêm

Hy vọng sau bài viết này bạn đã hiểu rõ hơn về cách sử dụng class, extends, super và static trong JavaScript một cách thực tiễn và dễ hiểu.