Trình tạo lớp JavaScript
Ví dụ
Tạo một lớp Xe hơi, sau đó tạo một đối tượng có tên là "mycar" dựa trên lớp Xe hơi:
class Car {
constructor(brand) { // Constructor
this.carname = brand;
}
}
mycar = new Car("Ford");
Thêm ví dụ "Hãy tự mình thử" bên dưới.
Sự miêu tả
Phương thức constructor()
là một phương thức đặc biệt để tạo và khởi tạo các đối tượng được tạo trong một lớp.
Phương thức constructor()
được gọi tự động khi một lớp được khởi tạo và nó phải có tên chính xác là "constructor", trên thực tế, nếu bạn không có phương thức khởi tạo, JavaScript sẽ thêm một phương thức khởi tạo trống và vô hình.
Lưu ý: Một lớp không thể có nhiều hơn một phương thức constructor(). Điều này sẽ đưa ra SyntaxError
.
Bạn có thể sử dụng phương thức super()
để gọi hàm tạo của lớp cha (xem phần "Các ví dụ khác" bên dưới).
Hỗ trợ trình duyệt
constructor()
là một tính năng của ECMAScript6 (ES6).
ES6 (JavaScript 2015) được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 6 năm 2017:
Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
constructor()
không được hỗ trợ trong Internet Explorer.
Cú pháp
constructor( parameters )
Chi tiết kỹ thuật
Phiên bản JavaScript: | ECMAScript 2015 (ES6) |
---|
Thêm ví dụ
Để tạo sự kế thừa lớp, hãy sử dụng từ khóa extends
.
Một lớp được tạo bằng tính kế thừa của lớp sẽ kế thừa tất cả các phương thức từ một lớp khác:
Ví dụ
Tạo một lớp có tên "Model" sẽ kế thừa các phương thức từ lớp "Ô tô":
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= mycar.show();
Phương thức super()
đề cập đến lớp cha.
Bằng cách gọi phương thức super()
trong phương thức khởi tạo, chúng ta gọi phương thức khởi tạo của cha và có quyền truy cập vào các thuộc tính và phương thức của cha.
Trang liên quan
Hướng dẫn JavaScript: Các lớp JavaScript
Hướng dẫn JavaScript: JavaScript ES6 (EcmaScript 2015)
Tham khảo JavaScript: Từ khóa mở rộng
Tham khảo JavaScript: Siêu từ khóa