Series về ES6: Class

Đào Xuân Truyền

• 4 min read
Series về ES6: Class

Trong phần trước thì chúng ta đã đi tìm hiểu về cách sử dụng rest params, destructuring và vòng lặp for..of. Trong phần tiếp theo, chúng ta sẽ đi tìm hiểu về class. Nó đã được ES6 chỉnh sửa rất nhiều để hướng tới một ngôn ngữ OOP. Bài viết này hướng đến một sô thay đổi class trong phiên bản ES6.

  • Class definition
  • Class Inheritance
  • Base class access
  • Static Members
  • Setter and Getter

Class

Với cách khai báo thông thường sẽ khai báo một biến có kiểu dữ liệu là object.

let employee = {
    name: null,
    age: null,
    setName: function (name) {
        this.name = name;
    },
    getName: function () {
        return this.name;
    },
    setAge: function (age) {
        this.age = age;
    },
    getAge: function () {
        return this.age;
    }
};

Tuy nhiên cách khai báo này khiến người mới khó tiếp cận sâu vào javascript, do vậy nên ES6 thay đổi hoàn toàn cách khai báo dựa theo chuẩn OOP.

  • Class definition

Trong phiên bản ES6 đã hỗ trợ khai báo một đối tượng sang chuẩn OOP bằng cách sử dụng từ khoá class.

class Employee {
    setName (name) {
        this.name = name;
    }
    getName () {
        return this.name;
    }
    setAge (age) {
        this.age = age;
    }
    getAge () {
        return this.age;
    }
};

Kiểu khai báo class trong ES6 chúng ta không thể khai báo trực tiếp thuộc tính cho nó được mà phải khởi tạo qua các phương thức và thường thì chúng ta sẽ đặt nó ở trong constructor luôn.

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

Lúc này khi khởi tạo đối tượng chúng ta có thể truyền luôn tham số cho nó như các ngôn ngữ khác.

new Employee("Haposoft", 5);
  • Class Inheritance

ES6 cung cấp thêm từ khoá extends để kế thừa từ đối tượng khác theo chuẩn OOP.

class A extends B { // code }

Trong đó A là class đang được khai báo và nó kế thừa các thuộc tính và phương thức từ class B

class MaleEmployee extends Employee {
    constructor (name,age,wifeName) {
        super(name,age);
        this.wifeName = wifeName;
    }
    setWifeName (wifeName) {
        this.setWifeName;
    }
    getWifeName () {
        return this.wifeName;
    }
}

Với MaleEmployee được kế thừa lại các thuộc tính từ class Employee trong ví dụ trên.

  • Base class access

Trong ES6, để thực hiện gọi các phương thức trong lớp cha khi đang ở lớp con, mà phương thức đó đã bị rewrite trong lớp con rồi thì các bạn sử dụng keyword super với cú pháp như sau:

super.methodName();

Trong đó, methodName là phương thức của lớp cha mà bạn muốn gọi.

class Employee {
    getClassName () {
        return "Class Employee";
    }
};
class MaleEmployee extends Employee {
    getClassName () {
        return "Class MaleEmployee";
    }
    classClassName () {
        return super.getClassName();
    }
}
let employee = new MaleEmployee();
console.log(employee.classClassName());
//kết quả: Class Employee

Và bạn cũng có thể gọi lại phương thức của lớp cha khi đang đứng trong phương thức đó ở lớp con (trong phương thức rewrite chính nó).

class Employee {
    getClassName () {
        return "Class Employee";
    }
};
class MaleEmployee extends Employee {
    getClassName () {
        return "Class MaleEmployee - " + super.getClassName();
    }
    classClassName () {
        return super.getClassName();
    }
}
let employee = new MaleEmployee();
console.log(employee.getClassName());
  • Static Members

ES6 hỗ trợ người dùng khai báo các thành phần tĩnh cho đối tượng, bằng cách sử dụng từ khoá static ở trước tên phương thức.

class Employee {
    static defaultEmployee () {
        return "default employee";
    }
};

Và khi một phương thức được khai báo là static methods thì chúng ta sẽ không thể gọi phương thức đó một cách thông thường được nữa, mà chúng ta sẽ gọi theo cú pháp:

className.stacMethodName();
  • Setter and Getter

Trong ES6 cũng hỗ trợ chúng ta thiết lập các setter và getter cho các thuộc tính. Để khai báo các setter và getter trong ES6 chúng ta sử dụng keyword set và get trước tên các phương thức mà bạn muốn thiết lập nó là setter hoặc getter.

class Employee {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    set employeeName (name) {
        this.name = name;
    }
    get employeeName () {
        return this.name;
    }
    set employeeAge (age) {
        this.age = age;
    }
    get employeeAge () {
        return this.age;
    }
};

Lúc này chúng ta sẽ sử dụng setter ,getter như làm với một thuộc tính thông thường.

//khởi tạo đối tượng
let employee = new Employee();
employee.employeeName = "Haposoft"
employee.employeeName;

Hoặc bạn cũng có thể thực hiện setter, getter bằng cách truy cập trực tiếp vào class mà không cần khởi tạo.

//setter
Employee.employeeName = "Haposoft"
//getter
Employee.employeeName;
//kết quả: Haposoft

Tổng kết

Trong bài viết này mình tập trung vào tìm hiểu về class, nó được dùng khá nhiều để khai báo đối tượng và một biến có kiểu dữ liệu là object. Nhưng chia sẻ này hi vọng có ích cho các bạn tìm hiểu về javascript và ES6. Trong phần tiếp theo, chúng ta sẽ đi tìm hiểu về IIFE và Closure

Tài liệu tham khảo:

https://www.javascripttutorial.net/es6/javascript-class/

https://viblo.asia/p/es6-tu-co-ban-toi-nang-cao-phan-2-GrLZDOxJKk0

Xem tiếp phần tiếp theo của series tại đây.

hoặc tham khảo phần trước của series tại đây.

Sign up for more like this.

Enter your email
Subscribe