Cách sử dụng Javascript Classes

Bởi

Javascript là ngôn ngữ lập trình dựa trên nguyên mẫu (prototype-based language). Và tất cả các object trong Javascript có một thuộc tính ẩn gọi là Prototype, nó cho phép bạn mở rộng các thuộc tính và method của một Object. Bạn có thể đọc thêm bài viết này: Object Prototype Javascript – Công cụ hỗ trợ OOP cho JS.

Mặc dù trong bản đặc tả ES6, họ đã cố gắng để JS có thể hỗ trợ lập trình hướng đối tượng bằng việc cho ra khái niệm Class. Tuy nhiên, Class trong javascript không thực sự đúng ý nghĩa như trong các ngôn ngữ OOP như Java, C#…

Để các bạn hiểu rõ hơn về Javacript Class , xem nó khác với khái niệm Class trong Java, C#… như thế nào? Cách sử dụng ra sao?

Mời các bạn đọc bài viết này nhé.

Nội dung chính của bài viết

Bản chất Class trong Javascript là một hàm
Định nghĩa một Class
Viết các method trong class
Kế thừa một class
- Tạm kết

Bản chất Class trong Javascript là một hàm

Theo một cách hiểu thì javascript class là một kiểu của hàm. Một class được định nghĩa với từ khóa class thay vì function.

Dưới đây là hai ví dụ về các định nghĩa một hàm và một class.

// Initializing a function with a function expression
const day_la_ham = function() {}

// Initializing a class with a class expression
const day_la_class = class {}

Bạn có thể truy xuất vào Prototype của một object thông qua hàm: Object.getPrototypeOf()

Giờ chúng ta sẽ thử với hàm rỗng vừa tạo ở trên nhé.

Object.getPrototypeOf(day_la_ham);

Output
ƒ () { [native code]

Kết quả tương tự nếu bạn thử với class day_la_class vừa tạo ở trên.

Đoạn code khai báo với cả hai từ khóa function và function đều trả về một function [[Prototype]]. Với Prototypes thì bất kỳ hàm nào cũng trở thành hàm khởi tạo một đối tượng thay vì phải sử dụng từ khóa new.

const x = function() {}

// Initialize a constructor from a function
const constructorFromFunction = new x();

console.log(constructorFromFunction);

//Output
x {}
constructor: ƒ ()

Tương tự với class:
const y = class {}

// Initialize a constructor from a class
const constructorFromClass = new y();

console.log(constructorFromClass);

//Output
y {}
constructor: class

Định nghĩa một Class

Ngoài cách định nghĩa một class kiểu như hàm ở trên, bạn có thể sử dụng constructor để định nghĩa các thuộc tính của class.

// Initializing a class definition
class Hero {
    constructor(name, level) {
        this.name = name;
        this.level = level;
    }
}

Viết các method trong class

Việc định nghĩa các method trong một class cũng rất đơn giản, giống như các ngôn ngữ khác thôi.

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

    // Adding a method to the constructor
    greet() {
        return ${this.name} says hello.;
    }
}

Để tạo một instance của một class, chúng ta dùng từ khóa new và gán giá trị cho một biến.

const hero1 = new Hero('Varg', 1);

Nếu chúng ta thử in những thông tin trong biến vừa nhận được bằng lệnh: console.log(hero1). Bạn có thể thấy chi tiết các thông tin và hiểu được điều gì đang xảy ra.

Output
Hero {name: "Varg", level: 1}
__proto__:
  ▶ constructor: class Hero
  ▶ greet: ƒ greet()

Kế thừa một class

Mục đích của người ta khi nhồi nhét khái niệm Class vào Javascript đó chính là để hạn chế việc phải lặp lại code quá nhiều. Cũng giống như các ngôn ngữ khác, người ta muốn tái sử dụng code Js càng nhiều càng tốt.

Các hàm constructor có thể được tạo từ class cha bằng cách sử dụng hàm call(). Trong ví dụ dưới đây, mình sẽ tạo thêm một class Mage, sẽ kế thừa các thuộc tính từ class Hero.

// Creating a new constructor from the parent
function Mage(name, level, spell) {
    // Chain constructor with call
    Hero.call(this, name, level);

    this.spell = spell;
}

Sau này, khi bạn tạo đối tượng instance mới của Mage, nó sẽ mang đầy đủ các thuộc tính của Hero cộng thêm thuộc tính mới của chính nó nữa.

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Bạn thử in thông tin của đối tượng hero2 bằng lệnh console.log(hero2) mà xem.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}
__proto__:
    ▶ constructor: ƒ Mage(name, level, spell)

Từ ES6, bạn sẽ thấy cú pháp kế thừa được thiết kế gần giống với Java. Tức là sử dụng từ khóa extends, và super().

// Creating a new class from the parent
class Mage extends Hero {
    constructor(name, level, spell) {
        // Chain constructor with super
        super(name, level);

        // Add a new property
        this.spell = spell;
    }
}

Tạm kết

Qua bài viết này, chúng ta đã hiểu được bản chất và cách định nghĩa, sử dụng Class trong javascript. Hiểu về cách kế thừa trong class cũng là cách để viết code hiểu quả hơn. Việc làm quen với Class trong JS là việc vô cùng cần thiết. Vì sao như vậy?

Vì các frameworks, thư viện hiện đại như React, Vue… sử dụng class rất nhiều.

Các bạn cảm nhận thế nào về class trong JS? Để lại dưới phần bình luận bên dưới nhé.

💥 Đọc thêm: