Lớp trong JavaScript

ECMAScript 2015, cũng được gọi là ES6, đã giới thiệu lớp JavaScript.

JavaScript lớp là mẫu của đối tượng JavaScript.

Ngôn ngữ ngữ pháp của JavaScript

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

Luôn thêm một tên constructor() của phương pháp:

Cú pháp

class ClassName {
  constructor() { ... }
}

Mẫu

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

Ví dụ trên tạo ra một lớp tên là "Car".

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

Lớp trong JavaScriptKhông phảiĐối tượng.

Nó là đối tượng củaMẫu.

Sử dụng lớp

Khi bạn có một lớp, bạn có thể sử dụng lớp đó để tạo đối tượng:

Mẫu

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Thử ngay

Ví dụ trên sử dụng Lớp Carđể tạo hai Đối tượng Car.

Phương pháp constructor sẽ được gọi tự động khi tạo đối tượng mới (phương pháp constructor method).

Phương pháp constructor

Phương pháp constructor là một phương pháp đặc biệt:

  • Nó phải có tên chính xác là "constructor"
  • Thực thi tự động khi tạo đối tượng mới
  • Dùng để khởi tạo thuộc tính đối tượng
  • Nếu bạn không định nghĩa phương pháp构造方法, JavaScript sẽ thêm một phương pháp constructor trống.

Phương pháp lớp

Cú pháp tạo phương pháp lớp tương tự như phương pháp đối tượng.

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

Luôn thêm phương pháp constructor().

Sau đó thêm bất kỳ số lượng phương pháp nào.

Cú pháp

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Tạo một phương pháp lớp tên là "age", nó trả về năm xe:

Mẫu

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Xe của tôi là " + myCar.age() + " năm.";

Thử ngay

Bạn có thể gửi các tham số vào phương pháp lớp:

Mẫu

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Xe của tôi là " + myCar.age(year) + " năm.";

Thử ngay

Hỗ trợ trình duyệt

Bảng dưới đây liệt kê phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ lớp JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Tháng 3 năm 2016 Tháng 7 năm 2015 Tháng 3 năm 2016 Tháng 10 năm 2015 Tháng 3 năm 2016

"use strict"

Cú pháp trong lớp phải được viết bằng chế độ chặt chẽ.

Nếu bạn không tuân thủ các quy tắc chế độ chặt chẽ, bạn sẽ nhận được thông báo lỗi.

Mẫu

Trong chế độ chặt chẽ, nếu bạn sử dụng biến mà không khai báo nó, bạn sẽ nhận được lỗi:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

Thử ngay

Trong JS Chế độ chặt chẽ Học thêm về 'Chế độ chặt chẽ' tại đây.