Class trong JavaScript

Trong phạm vi bài viết này, chúng ta sẽ cùng nhau tìm hiểu những kiến thức cơ bản nhất về Class trong JavaScript, qua đó giúp các bạn hiểu hơn về cách làm việc và vận dụng Class trong các ngôn ngữ lập trình hướng đối tượng (OOP) khác.

1.Cú pháp cơ bản của Class

class MyClass {
  // class methods
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

Sau đó chúng ta sử dụng new MyClass() để tạo mới một đối tượng với các phương thức được liệt kê

Các constructor() lúc này được gọi tự động bằng new vì vậy chúng ta có thể dễ dàng khởi tạo nó.

Ví dụ:

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// Usage:
let user = new User("John");
user.sayHi();

Vậy khi nào new User("John")được gọi:

• Khi một đối tượng mới được tạo ra.
• Và constructor chạy với đối số đã cho và gán nó cho this.name.

Sau đó, chúng ta có thể gọi các phương thức đối tượng, chẳng hạn như user.sayHi().

2. Vậy Class là gì?

Qua ví dụ trên chúng ta đã biết về cú pháp cơ bản của 1 Class. Vậy Class trong JavaScript là gì?

Trong JavaScript 1 Class là 1 loại hàm (Giống 1 function đặc biệt). Ví dụ:

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

// proof: User is a function
alert(typeof User); // function

Lớp (class) trong JavaScript còn có thể hiểu là cú pháp cải tiến (syntactical sugar) dựa trên nền tảng thừa kế nguyên mẫu (prototypal inheritance) sẵn có trong JavaScript. Cú pháp class không giới thiệu mô hình thừa kế hướng đối tượng mới cho JavaScript.

3. Class Expression

Cũng giống như các function, các lớp có thể được định nghĩa bên trong một biểu thức khác. Nó có thể được đặt tên hoặc không đặt tên. Nếu được đặt tên thì tên của Class chỉ cục bộ đối với phần thân Class

Đây là một ví dụ về Class Expression

let User = class {
  sayHi() {
    alert("Hello");
  }
};

4. Getters/Setters

Cũng giống như literal objects (Object literal là kiểu cú pháp tạo object sử dụng cặp dấu ngoặc {} và bên trong đó là danh sách các property (thuộc tính) của object.) các lớp cũng có thể bao gồm getters và setters.

Đây là một ví dụ cho user.nametriển khai bằng cách sử dụng get/set:

class User {

  constructor(name) {
    // invokes the setter
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short.");
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // Name is too short.

Về mặt kỹ thuật, khai báo Class như vậy hoạt động bằng cách tạo getters và setters trong User.prototype.

5. Computed names

Đây là một ví dụ với Computed names sử dụng brackets [...]:

class User {

  ['say' + 'Hi']() {
    alert("Hello");
  }

}

new User().sayHi();

Các tính năng như vậy rất dễ nhớ, vì chúng giống với các đối tượng theo đúng nghĩa đen.

5. Class fields

“Class fields” là một cú pháp cho phép bạn thêm bất kì thuộc tính nào.

Ví dụ: Hãy thêm thuộc tính name vào class User

class User {
  name = "John";

  sayHi() {
    alert(`Hello, ${this.name}!`);
  }
}

new User().sayHi(); // Hello, John!

6. Tổng kết

Như vậy trong bài viết này chúng ta đã cùng nhau tìm hiểu các phạm vi kiến thức cơ bản về Class trong JavaScript. Dưới đây là phần tóm lược lại cú pháp cơ bản (bao gồm cả getters và setters) về Class trong JavaScript. Cảm ơn các bạn!

class MyClass {
  prop = value; // property

  constructor(...) { // constructor
    // ...
  }

  method(...) {} // method

  get something(...) {} // getter method
  set something(...) {} // setter method

  [Symbol.iterator]() {} // method with computed name (symbol here)
  // ...
}