Cách sử dụng các lớp JavaScript

Vào năm 2015, tiêu chuẩn ECMAScript 6 (ES6) đã giới thiệu các lớp học. Tìm hiểu tất cả về chúng

Vào năm 2015, tiêu chuẩn ECMAScript 6 (ES6) đã giới thiệu các lớp học.

JavaScript có một cách khá phổ biến để triển khai kế thừa: kế thừa nguyên mẫu.Kế thừa nguyên mẫu, trong khi theo ý kiến của tôi thì tuyệt vời, không giống như hầu hết việc thực hiện kế thừa của ngôn ngữ lập trình phổ biến khác, đó là dựa trên lớp.

Những người đến từ Java hoặc Python hoặc các ngôn ngữ khác đã gặp khó khăn trong việc hiểu sự phức tạp của kế thừa nguyên mẫu, vì vậy ủy ban ECMAScript đã quyết định rắc đường cú pháp lên trên kế thừa nguyên mẫu để nó giống với cách hoạt động của kế thừa dựa trên lớp trong các triển khai phổ biến khác.

Điều này rất quan trọng: JavaScript bên dưới vẫn giống nhau và bạn có thể truy cập nguyên mẫu đối tượng theo cách thông thường.

Một định nghĩa lớp

Đây là cách một lớp học trông như thế nào.

class Person {
  constructor(name) {
    this.name = name
  }

hello() { return 'Hello, I am ’ + this.name + ‘.’ } }

Một lớp có một mã định danh, chúng ta có thể sử dụng để tạo các đối tượng mới bằng cách sử dụngnew ClassIdentifier().

Khi đối tượng được khởi tạo,constructorphương thức được gọi, với bất kỳ tham số nào được truyền vào.

Một lớp cũng có nhiều phương thức tùy theo nhu cầu của nó. Trong trường hợp nàyhellolà một phương thức và có thể được gọi trên tất cả các đối tượng dẫn xuất từ lớp này:

const flavio = new Person('Flavio')
flavio.hello()

Kế thừa lớp

Một lớp có thể mở rộng một lớp khác và các đối tượng được khởi tạo bằng cách sử dụng lớp đó kế thừa tất cả các phương thức của cả hai lớp.

Nếu lớp kế thừa có một phương thức trùng tên với một trong các lớp cao hơn trong hệ thống phân cấp, thì phương thức gần nhất sẽ được ưu tiên:

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}

const flavio = new Programmer(‘Flavio’) flavio.hello()

(chương trình trên in ra “Xin chào, tôi là Flavio. Tôi là một lập trình viên.”)

Các lớp không có khai báo biến lớp rõ ràng, nhưng bạn phải khởi tạo bất kỳ biến nào trong phương thức khởi tạo.

Bên trong một lớp, bạn có thể tham chiếu đến việc gọi lớp chasuper().

Phương pháp tĩnh

Thông thường các phương thức được định nghĩa trên cá thể, không phải trên lớp.

Thay vào đó, các phương thức tĩnh được thực thi trên lớp:

class Person {
  static genericHello() {
    return 'Hello'
  }
}

Person.genericHello() //Hello

Các phương pháp riêng tư

JavaScript không có một cách tích hợp để xác định các phương thức riêng tư hoặc được bảo vệ.

Có những cách giải quyết, nhưng tôi sẽ không mô tả chúng ở đây.

Getters và setters

Bạn có thể thêm các phương thức có tiền tốgethoặc làsetđể tạo getter và setter, là hai đoạn mã khác nhau được thực thi dựa trên những gì bạn đang làm: truy cập biến hoặc sửa đổi giá trị của nó.

class Person {
  constructor(name) {
    this._name = name
  }

set name(value) { this._name = value }

get name() { return this._name } }

Nếu bạn chỉ có một getter, thuộc tính không thể được đặt và bất kỳ nỗ lực nào để làm như vậy (bên ngoài hàm tạo, đặt giá trị khi bạn khởi tạo một đối tượng mới với lớp này) sẽ bị bỏ qua:

class Person {
  constructor(name) {
    this._name = name
  }

get name() { return this._name } }

Nếu bạn chỉ có một setter, bạn có thể thay đổi giá trị nhưng không thể truy cập nó từ bên ngoài:

class Person {
  constructor(name) {
    this._name = name
  }

set name(value) { this._name = value } }

Getters và setters rất hữu ích khi bạn muốn thực thi một số mã khi thay đổi giá trị thuộc tính hoặc nếu bạn muốn tạo thuộc tính “tính toán”. Bạn có thể thay đổi các giá trị bạn trả về bằng cách sử dụng getter.

Bạn cũng có thể chạy một số mã, như đăng nhập vào bảng điều khiển hoặc vào một tệp khi một giá trị được thay đổi.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: