Cách tạo class trong Javascript (Hướng đối tượng OOP ES6)

Trong bài này chúng ta sẽ tìm hiểu về class trong Javascript, qua đó sẽ giúp bạn hiểu ...

Class là một kỹ thuật trong lập trình dùng để cài đặt một đối tượng trong thực tế, qua đó ta có thể thêm các tính chất và hành động của đối tượng vào trong class, và chúng được thể hiện qua các thuộc tính và phương thức.

1. Class trong Javascript là gì?

Class trong javascript là một kỹ thuật giúp ta tạo ra các lớp mẫu chương trình để thể hiện cho các đối tượng. Qua đó, ta có thể thêm các hành động và thuộc tính của đối tượng vào trong lớp thông qua hai khái niệm thuộc tính và phương thức.

Ví dụ, đối tượng Sinh Viên sẽ có các đặc điểm như: Mã sinh viên, tên, tuổi, quê quán ... Và các hành động như: Thêm / xóa / sửa và thi cử.. Lúc này ta sẽ cài đặt đối tượng sinh viên này trong javascript thông qua class.

Bài viết này được đăng tại [free tuts .net]

Thực tế thì bạn có thể sử dụng constructor function, nhưng thời điểm hiện tại thì người ta vẫn ưu tiên sử dụng class hơn, bởi nó thể hiện rõ kỹ thuật lập trình hướng đối tượng OOP trong ngôn ngữ này.

Cú pháp tạo class như sau:

class MyClass {
  // Hàm khởi tạo
  constructor() { ... }
  // Các phương thức
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

Các thuộc tính sẽ được định nghĩa trong hàm khởi tạo constructor ngay bên trong class. Chúng ta sẽ tìm hiểu kỹ nó hơn trong bài viết private và protected trong js.

2. Khai báo thuộc tính cho class trong js

Để khai báo thuộc tính cho class thì chúng ta có hai cách. Thứ nhất là khai báo trong hàm khởi tạo constructor, thứ hai là khai báo trực tiếp.

Cách 1: Khai báo trong hàm constructor.

class User {
    constructor(){
        // Khai báo các thuộc tính
        this.name = '';
        this.age = '';
        this.address = '';
    }
}

Cách 2: Khai báo trực tiếp ngay bên trong class.

class User {
    name = ''
    age = ''
    address = ''
}

3. Khai báo phương thức cho class trong js

Trong class, khi tạo một phương thức thì bạn không cần sử dụng từ khóa function nhé. Tiếp theo là cú pháp tạo function như chúng ta đã học.

class User {
    // Định nghĩa phương thức showMessage
    showMessage(){
        console.log("Đây là nội dung tin nhắn");
    }
}

Sau đây là một ví dụ tổng hợp.

Ví dụ: Tạo một đối tượng User gồm thuộc tính name và một phương thức sayHi.

class User {

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

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

}

// Cách dùng:
let user = new User("Cường");
user.sayHi(); // Cường

Hàm constructor sẽ được khởi chạy mỗi khi bạn sử dụng từ khóa new để khởi tạo class. Vì vậy, thuộc tính name sẽ được bổ sung vào đối tượng this (this chính là đối tượng hiện tại).

Lưu ý: Bạn đừng nhầm lẫn class với object nhé.

• Trong object, ta sẽ phải sử dụng dấu phẩy để ngăn cách giữa các thuộc tính hoặc phương thức.
• Trong class, ta không cần sử dụng dấu phẩy

4. Các bước tạo class trong javascript

Để tạo một class thì bạn nên thực hiện theo các bước dưới đây:

• Bước 1: Phân tích kỹ đối tượng sẽ có những phương thức nào, thuộc tính nào.
• Bước 2: Cài đặt class trong js

Ví dụ: Xây dựng class Person với mục đích khai báo y tế trong mùa dịch Covid - 19.

Bước 1: Đối tượng này Person sẽ cần có tên, địa chỉ, số điện thoại, số căn cước. Ta sẽ có một hành động là khai báo y tế.

Bước 2: Cài đặt chương trình.

class Person{
    constructor(name, address, phone, cmnd){
        this.name = name;
        this.address = address;
        this.phone = phone;
        this.cmnd = cmnd;
    }
    
    khaibao(){
        return `Tôi tên là ${this.name}, đang sống tại ${this.address}, 
                số điện thoại ${this.phone}, số cmnd là ${this.cmnd}`;
    }
}

5. Dùng function để thay thế class trong javascript

Trong javascript, class là một function. Ta có thể kiểm tra bằng cách sử dụng từ khóa typeof.

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

// Xem User thuộc thể loại gì
console.log(typeof User); // function

Kết quả trả về sẽ là function. Vì vậy, sẽ có một đối tượng tên là User, trong đối tượng này sẽ có các prototype.

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

// class là một function
alert(typeof User); // function

// User chính là một constructor
alert(User === User.prototype.constructor); // true

// Phương thức sayHi cũng nằm trong prototype, e.g:
alert(User.prototype.sayHi); // the code of the sayHi method

// Xem danh sách các thuộc tính của User.prototype
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

Như vậy, ta có thể sử dụng function để khai báo class User thay thế cho đoạn code trên như sau:

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

Để hiểu rõ hơn về vấn đề này thì bạn hãy xem thêm trong bài constructor function nhé.

6. Một vài biểu thức khác của class trong javascript

Ngoài cách sử dụng cơ bản như trên thì ta có thêm một vài biến thể khác nữa của class.

Giống như một function, bạn có thể khai báo class và gắn trực tiếp nó vào một biến như sau:

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

let user1 = new User();
user1.sayHi();

Trường hợp này bạn cũng có thể đặt một cái tên ảo cho class, và tên này chỉ được phép sử dụng bên trong class mà thôi.

let User = class TenClass{
  sayHi() {
    alert(TenClass);
  }
};

let user1 = new User();
user1.sayHi(); // Hiển thị nội dung của class

alert(TenClass); // Không tồn tại

Với hai cách dùng trên thì ta có thể tạo ra một cách dùng khá hay khác, đó là khởi tạo class trong một hàm và cho hàm đó return về chính class đó.

function makeClass(phrase) {
  // Định nghĩa class và return nó về
  return class {
    sayHi() {
      alert(phrase);
    }
  };
}

// Tạo một class
let User = makeClass("Hello");

new User().sayHi(); // Hello

Như vậy hàm makeClass sẽ có nhiệm vụ là khởi tạo một class theo ý mình.

7. Getters và setters của class trong javascript

Getters và setters là hai khái niệm khá hay trong lập trình oop, cụ thể như sau:

• Getters là những hàm có nhiệm vụ lấy giá trị của thuộc tính
• Setters là những hàm có nhiệm vụ thiết lập giá trị cho các thuộc tính

Javascript cung cấp hai từ khóa get và set giúp ta định nghĩa hai loại phương thức này.

class User {
    constructor(name) {
        // Tự động gọi đến hàm set name
        this.name = name;
    }

    get name() {
        return "Tên bạn là " + this._name;
    }

    set name(value) {
        if (value.length < 4) {
            alert("Vui lòng nhập tên dài hơn 4 kí tự");
            return;
        }
        this._name = value;
    }
}

let user = new User("Cường");
alert(user.name); // Tên bạn là Cường

user = new User(""); // Lỗi "Vui lòng nhập tên dài hơn 4 kí tự"

Trong hàm constructor mình đã thiết lập giá trị cho thuộc tính name như sau:

this.name = name

Lúc này javascript sẽ tự gọi đến phương thức set name, nên nếu bạn nhập ngắn hơn 4 ký tự thì sẽ bị thông báo lỗi.

Còn khi mình gọi đến thuộc tính của lớp alert(user.name); thì javascript sẽ tự động thêm vào dòng chữ "Tên của bạn là ...".

Lời kết: Như vậy là chúng ta đã tìm hiểu xong cách khởi tạo class trong javascript. Qua bày này thì ta thấy rằng javascript bây giờ đã là một ngôn ngữ theo hướng đối tượng, kết hợp với công dụng của nó trên nền web và server giúp js trở thành một ngôn ngữ tương lai. Nếu bạn là một lập trình viên mà bỏ qua ngôn ngữ này thì quả là một sai lầm.