Lớp trong JavaScript

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

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

Lớp JavaScript

cú pháp

Hãy sử dụng từ khóa class Tạo lớp.

Hãy luôn thêm tên constructor() của phương pháp:

cú pháp

class Tên lớp {
  constructor() { ... }
}

thực thể

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

Ví dụ trên đã tạo ra lớp có tên "Car".

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

Lớp trong JavaScriptkhông phảiđối tượng.

Nó chỉ là mẫu đối tượng JavaScript.mẫu。

Sử dụng lớp

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

thực thể

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

Thử nghiệm trực tiếp

Ví dụ trên sử dụng lớp Carđã tạo ra 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

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 hiện 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 không định nghĩa phương pháp constructor, JavaScript sẽ thêm phương pháp constructor trống.

Phương pháp lớp

Tạo phương pháp lớp

cú pháp

như phương pháp đối tượng.

Hãy sử dụng từ khóa class Tạo lớp.

Hãy luôn thêm constructor() phương pháp.

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

cú pháp

class Tên lớp {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Tạo phương pháp lớp có tên "age" để trả về độ tuổi của xe:

thực thể

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ử nghiệm trực tiếp

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

thực thể

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ử nghiệm trực tiếp

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 hỗ trợ hoàn toàn 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

Trong hướng dẫn này, bạn sẽ học thêm về các kiến thức về lớp JavaScript.