Các lớp javascript

ECMAScript 2015, còn được gọi là ES6, đã giới thiệu các Lớp JavaScript.
Lớp JavaScript là mẫu cho các Đối tượng JavaScript.

Cú pháp lớp javascript

Để tạo một lớp, chúng ta sử dụng từ khóa class. Và luôn thêm một phương thức constructor() khi khởi tạo một lớp.

Cú pháp

class className {
  constructor() {...}
}

Ví dụ

class car {
    constructor(name, year) {
        this.name = name;
        this.year = year;    
    }    
}

Ví dụ trên tạo một lớp có tên là "car".

Lớp có hai thuộc tính ban đầu: "name" và "year".

Một lớp JavaScript không phải là một đối tượng.
Nó là một mẫu cho các đối tượng JavaScript.

Sử dụng lớp javascript

Khi chúng ta có một lớp, chúng ta có thể sử dụng lớp đó để tạo các đối tượng mới.

Ví dụ

class car {
    constructor(name, year) {
        this.name = name;
        this.year = year;    
    }    
}

const car1 = new car("Innova", 2020);
document.getElementById('demo').innerHTML = car1.name + " " + car1.year;

Xem kết quả

Ví dụ trên sử dụng lớp Car để tạo một đối tượng Car1.

Phương thức khởi tạo được gọi tự động khi một đối tượng mới được tạo.

Phương thức constructor()

Phương thức hàm tạo là một phương thức đặc biệt:

Nó phải có tên chính xác là "constructor"
Nó được thực thi tự động khi một đối tượng mới được tạo
Nó được sử dụng để khởi tạo các thuộc tính của đối tượng
Nếu chúng ta không xác định một phương thức khởi tạo, JavaScript sẽ thêm một phương thức khởi tạo trống.

Phương thức class

Các phương thức lớp được tạo ra với cùng một cú pháp như các phương thức đối tượng.

Sử dụng từ khóa class để tạo một lớp.

Luôn phải thêm một phương thức constructor()

Sau đó, chúng ta có thể thêm bất kỳ số lượng phương thức nào.

Cú pháp

class className {
  constructor() {...};
  method1() {...};
  method2() {...};
  method3() {...};
}

Ví dụ sau Tạo một phương thức Class có tên "age", phương thức này trả về year của đối tượng car.

Ví dụ

class car {
    constructor(name, year) {
        this.name = name;
        this.year = year;    
    }
    age() {
        const date = new Date();
        return (date.getFullYear() - this.year);    
    }    
}

const car1 = new car("Innova",2010);
const car2 = new car("Innova",2015);
document.getElementById('demo').innerHTML = 
"Xe " + car1.name + " chạy được " + car1.age() + " năm.";

Xem kết quả

Chúng ta cũng có thể gửi các tham số đến các phương thức Class.

Ví dụ

class car {
    constructor(name, year) {
        this.name = name;
        this.year = year;    
    }
    age(x) {
        return (x - this.year);    
    }    
}
const date = new Date();
var x = date.getFullYear();
const car1 = new car("Innova",2010);
document.getElementById('demo').innerHTML = 
"Xe " + car1.name + " chạy được " + car1.age(x) + " năm.";

Xem kết quả

Hỗ trợ trình duyệt

Bảng bên dưới xác định phiên bản trình duyệt đầu tiên có hỗ trợ đầy đủ cho Lớp trong JavaScript.


Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
Mar, 2016	Jul, 2015	Mar, 2016	Oct, 2015	Mar, 2016

Chế độ nghiêm ngặt JavaScript

Cú pháp trong các lớp phải được viết ở "strict mode".

Chúng ta sẽ gặp lỗi nếu không tuân theo các quy tắc "chế độ nghiêm ngặt".

Ví dụ

class car {
    constructor(name, year) {
        this.name = name;
        this.year = year;    
    }
    age() {
        date = new Date() // code này sẽ không hoạt động ở chế độ strict mode
        const date = new Date(); // code này thì ok
        return (date.getFullYear() - this.year);    
    }    
}