Tìm hiểu Class trong JavaScript thông qua ví dụ

Chào các bạn, trong bài viết trước chúng ta đã cùng nhau tìm hiểu về Set vs WeakSet Javascript ES6 là gì?. Ở bài viết này chúng ta sẽ tìm hiểu về class trong JavaScript nhé!

JavaScript Class

class trong JavaScript là một bản thiết kế (blueprint) cho đối tượng. Chúng ta có thể tạo một object thông qua class.

Các bạn có thể coi class như một bản phác thảo (prototype) của một ngôi nhà. Nó chứa các chi tiết về sàn nhà, đồ đạc trong phòng, cửa sổ,... Dựa trên những mô tả này, chúng ta xây dựng một ngôi nhà, ngôi nhà lúc này là một object.

Các bạn có thể tìm hiểu về prototype trong JavaScript ở bài viết này: Tìm hiểu về Prototype trong JavaScript.

Vì nhiều ngôi nhà có thể được tạo từ cùng một mô tả, nên chúng ta có thể tạo nhiều object từ một class.

Tạo JavaScript Class

class trong JavaScript tương tự như constructor function trong Javascript và nó chỉ đơn giản là một syntactic sugar giúp chúng ta dễ đọc hơn.

Một ví dụ sử dụng constructor function:

// constructor function
function Blog () {
    this.name = 'homiedev.com',
    this.categories = ['JavaScript', 'GatsbyJs', 'ReactJS']
}

// tạo một object
const blog = new Blog();

Thay vì sử dụng cách trên, chúng ta có thể sử dụng từ khóa class để tạo các class.

Ví dụ:

// tạo một class
class Blog {
  constructor(name) {
    this.name = name;
  }
}

Từ khóa class được sử dụng để tạo một lớp. Các thuộc tính được thêm vào trong một contructor.

Bây giờ chúng ta có thể tạo một object.

Ví dụ:

// tạo một class
class Blog {
  constructor(name) {
    this.name = name;
  }
}

// tạo các object
const blog1 = new Blog('homiedev');
const blog2 = new Blog('homiedev.com');

console.log(blog1.name); // homiedev
console.log(blog2.name); // homiedev.com

Trong ví dụ trên, blog1 và blog2 là các đối tượng (object) của class Blog.

Method constructor() trong một class được gọi tự động mỗi khi một đối tượng được tạo. Các bạn không cần gọi method này.

Javascript Class Methods

Khi sử dụng constructor function, chúng ta định nghĩa các method bằng cách:

// constructor function
function Person(name) {
  this.name = name;

  // tạo các method
  this.greet = function () {
    return (`Hello ${this.name} 😀`);
  }
}

Đối với khi sử dụng class, chúng ta sẽ tạo method đơn giản như sau:

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

  // tạo method
  greet() {
    console.log(`Hello ${this.name} 😀`);
  }
}

let person1 = new Person('Trang');

// lấy thuộc tính name
console.log(person1.name); // Trang

// sử dụng method
person1.greet(); // Hello Trang 😀

Để thực thi method của một object, bạn cần gọi method bằng cách sử dụng tên của nó theo sau là ().

Getter và Setter trong class JavaScript

Trong JavaScript, method getter lấy giá trị từ một object và method setter có chức năng đặt giá trị cho object.

Trong class JavaScript, chúng ta sử dụng từ khóa get cho method getter và set cho method setter.

Ví dụ:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // getter
  get personName() {
    return this.name;
  }

  // setter
  set personName(x) {
    this.name = x;
  }
}

let person1 = new Person('Trang', 22);
console.log(person1.personName); // Trang

// Thay đổi giá trị name
person1.personName = 'Minh';
console.log(person1.name); // Minh

Hoisting

Khi sử dụng class, chúng ta cần định nghĩa trước khi sử dụng nó. Không giống như các hàm và các khai báo JavaScript khác, class sẽ không có cơ chế hoisting.

Để tìm hiểu về hoisting trong JavaScript bạn đọc bài viết tại đây: Hoisting trong JavaScript.

Ví dụ:

// tạo một object từ class Person
const p = new Person(); 
// Lỗi: Uncaught ReferenceError: Person is not defined

// khởi tạo class
class Person {
  constructor(name) {
    this.name = name;
  }
}

'use strict'

class luôn tuân theo 'use strict'. Các đoạn code bên trong class sẽ tự động ở strict mode.

Ví dụ:

class Blog {
  constructor() {
    blogName = 'homiedev.com';
    this.name = this.blogName;
  }
}

let blog = new Blog(); 
// Uncaught ReferenceError: blogName is not defined

class trong JavaScript là một hàm đặc biệt. Nếu sử dụng toán tử typeof cho một class bạn sẽ thấy kết quả trả về là function.

class Person {}
console.log(typeof Person); // function