Cấp lớp và cấp instance

Thuộc phần Lập trình hướng đối tượng trong hành trình JavaScript của Coddy. Bài học 31 trên 56.

Trong các lớp JavaScript, có hai cấp độ thuộc tính và phương thức riêng biệt:

Cấp độ đối tượng: Thuộc tính và phương thức thuộc về từng đối tượng được tạo từ lớp.
Cấp độ lớp: Thuộc tính và phương thức thuộc về chính lớp đó, không thuộc về các đối tượng.

Hãy cùng tìm hiểu sự khác biệt:

Trước tiên, hãy cùng xem các thành viên cấp đối tượng. Tạo một lớp thông thường có phương thức đối tượng:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Tạo một đối tượng của lớp Car:

const myCar = new Car("Toyota");

Gọi phương thức của đối tượng:

console.log(myCar.drive()); // Đầu ra: "The Toyota is driving"

Lưu ý rằng mọi đối tượng đều có thể gọi phương thức drive, phương thức này được mọi đối tượng dùng chung. Bên trong phương thức, this tham chiếu đến đối tượng đã gọi phương thức đó, nên nó đọc các thuộc tính riêng của đối tượng ấy.

Bây giờ, hãy cùng xem các thành viên cấp lớp. Chúng ta thêm một phương thức tĩnh vào lớp. Dùng từ khóa static trước tên phương thức để tạo một phương thức thuộc về chính lớp đó, không thuộc về các đối tượng.

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

Phương thức static hữu ích cho các hàm tiện ích không phụ thuộc vào dữ liệu của một instance cụ thể. Bạn gọi phương thức static trên chính lớp, không phải trên các instance:

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // Đầu ra: "Comparing Toyota with Honda"

Gọi một phương thức tĩnh trên một đối tượng sẽ gây ra lỗi:

car1.compareModels(car1, car2); // Lỗi: car1.compareModels không phải là một hàm

Thử thách

Bạn được cung cấp một lớp Calculator chỉ có hàm khởi tạo. Nhiệm vụ của bạn là thêm hai phương thức:

1. Phương thức của instance add(number)

Cộng số đã cho vào giá trị hiện tại của máy tính
Cập nhật this.value và trả về giá trị mới
*Phương thức này được gọi trên các instance của máy tính: calc.add(3)

2. Phương thức tĩnh multiply(num1, num2)

Nhận hai số và trả về tích của chúng
KHÔNG sử dụng this (phương thức tĩnh không có dữ liệu của instance)
*Phương thức này được gọi trên chính lớp Calculator: Calculator.multiply(4, 6)

Tự làm thử

import { Calculator } from './calculator.js';


// Đừng sửa đoạn code bên dưới
const calc = new Calculator(5);        // Tạo đối tượng máy tính với giá trị = 5
const result1 = calc.add(3);           // Cần cộng 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Cần nhân 4 × 6 = 24
console.log(result1);                   // Kết quả mong đợi: 8
console.log(result2);                   // Kết quả mong đợi: 24