JavaScript: Class

Tổng quan

Trong bài viết này, bạn sẽ tìm hiểu về Class (lớp) trong JavaScript và cách sử dụng nó một cách hiệu quả. Class (lớp) JavaScript là một bản thiết kế chi tiết để tạo các đối tượng. Một class đóng gói dữ liệu và các hàm thao tác dữ liệu. Không giống như các ngôn ngữ lập trình khác như Java và C# , các class trong JavaScript là cú pháp tổng hợp dựa trên sự kế thừa nguyên mẫu. Nói cách khác, các class ES6 chỉ là những hàm đặc biệt.

Class trước ES6

Trước ES6, JavaScript không có khái niệm về lớp. Để bắt chước một lớp, bạn thường sử dụng mẫu hàm tạo/nguyên mẫu (constructor/prototype parttern) như trong ví dụ sau:

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

Person.prototype.getName = function () {
    return this.name;
};

var john = new Person("John Doe");
console.log(john.getName());

Output: 

John Doe

Giải thích: 

Đầu tiên, tạo ra lớp Person như một hàm khởi tạo có một thuộc tính là name. Hàm getName() được gán vào prototype để có thể được chia sẻ bởi tất cả các đối tượng của loại Person. Tiếp theo, tạo một đối tượng mới của lớp Person bằng cách sử dụng toán tử new. Do đó, đối tượng john là một đối tượng của cả Person và Object thông qua kế thừa theo mô hình prototype.

Các câu lệnh sau đây sử dụng toán tử instanceof để kiểm tra xem liệu john có phải là một đối tượng thuộc của kiểu Person và Object hay không.

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

Khai báo class trong ES6

ES6 đã giới thiệu một cú pháp mới để khai báo một lớp như trong ví dụ này:

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

Lớp Person này hoạt động giống như lớp Person trong ví dụ trước. Tuy nhiên, thay vì sử dụng mẫu hàm tạo/nguyên mẫu, nó sử dụng từ khóa class.

Trong lớp Person, constructor() là nơi bạn có thể khởi tạo các thuộc tính. JavaScript tự động gọi phương thức constructor() khi bạn khởi tạo một đối tượng của lớp.

Đoạn code sau đây tạo một đối tượng Person mới, đối tượng này sẽ tự động gọi hàm constructor() đã được tạo khi định nghĩa class.

let john = new Person("John Doe");

Hàm getName() được gọi là một phương thức của lớp Person. Giống như hàm khởi tạo, bạn có thể gọi các phương thức của một lớp bằng cú pháp sau:

objectName.methodName(args)

Ví dụ:

let name = john.getName();
console.log(name); // "John Doe"

Để xác minh rằng các lớp là các hàm đặc biệt, bạn có thể sử dụng toán tử typeof để kiểm tra loại của lớp Person

console.log(typeof Person); // function

Đối tượng john cũng là một đối tượng của Person và Object.

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

Class và Custom type

Mặc dù có những điểm tương đồng giữa một lớp và một kiểu tùy chỉnh được xác định thông qua hàm xây dựng, nhưng vẫn có một số khác biệt quan trọng.

Đầu tiên, các khai báo lớp không được hoist như các khai báo hàm.

Ví dụ: nếu bạn đặt đoạn mã sau phía trên phần khai báo lớp  Person, bạn sẽ nhận được lỗi ReferenceError.

let john = new Person("John Doe"); // xuất hiện lỗi: Uncaught ReferenceError: Person is not defined

Thứ hai, tất cả mã bên trong một lớp sẽ tự động thực thi ở chế độ nghiêm ngặt. Và bạn không thể thay đổi hành vi này.

Thứ ba, các phương thức của lớp là không thể thể liệt kê (non-enumerable) trong khi các phương thức khi sử dụng hàm tạo/mẫu nguyên mẫu sẽ là có thể liệt kê (enumerable). Nếu bạn sử dụng mẫu hàm tạo/nguyên mẫu, bạn phải sử dụng phương thức Object.defineProperty() để tạo một thuộc tính không thể liệt kê (non-enumerable).

Cuối cùng, việc gọi hàm tạo của lớp mà không có toán tử new sẽ dẫn đến lỗi như trong ví dụ sau:

let john = Person("John Doe");

Lỗi như sau:

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'