lớp kế thừa javascript

Lớp kế thừa

Để tạo kế thừa lớp, chúng ta sử dụng từ khóa extends.

Một lớp được tạo với kế thừ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ụ

class car {
    constructor(brand) {
        this.carName = brand;
    }
    present() {
        return "Thương hiệu xe " + this.carName;     
    }    
}

class carname extends car {
    constructor(brand, model) {
        super(brand);
        this.model = model;
    }    
    show() {
        return this.present() + ", nhãn hiệu xe " + this.model;     
    }
}

const car1 = new carname("Toyota","Innova");
document.getElementById('demo').innerHTML = car1.show();

Xem kết quả

Phương thức super() tham chiếu đế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 lớp cha và nhận quyền truy cập vào các thuộc tính và phương thức của lớp cha.

Kế thừa sẽ hữu ích cho khả năng tái sử dụng mã. Sử dụng lại các thuộc tính và phương thức của một lớp hiện có khi chúng ta tạo một lớp mới.

Getters và Setters

Các lớp cũng cho phép chúng ta sử dụng getters và setters.

Có thể là thông minh khi sử dụng getters và setters cho các thuộc tính, đặc biệt nếu chúng ta muốn làm điều gì đó đặc biệt với giá trị trước khi trả lại chúng hoặc trước khi đặt chúng.

Để thêm getters và setters trong lớp, chúng ta sử dụng từ khóa get và set.

Ví dụ

class car {
    constructor(brand) {
        this.carName = brand;
    }
    get carname() {
        return this.carName;     
    }
    set carname(x) {
        this.carName = x ;     
    }    
}

const car1 = new car("Toyota");
document.getElementById('demo').innerHTML = car1.carname;

Xem kết quả

Lưu ý: ngay cả khi getter là một phương thức, chúng ta cũng không sử dụng cặp dấu ngoặc đơn khi nhận giá trị thuộc tính.

Trong trường hợp này, tên của phương thức getter/ setter không được giống với tên của thuộc tính carname.

Nhiều lập trình viên sử dụng một ký tự gạch dưới _ trước tên thuộc tính để tách getter/ setter khỏi thuộc tính thực tế.

Ví dụ

class car {
    constructor(brand) {
        this._carName = brand;
    }
    get carname() {
        return this._carName;     
    }
    set carname(x) {
        this._carName = x ;     
    }    
}

const car1 = new car("Toyota");
document.getElementById('demo').innerHTML = car1.carname;

Xem kết quả

Để sử dụng setters, chúng ta sử dụng cú pháp giống như khi đặt giá trị thuộc tính, không có dấu ngoặc đơn.

Ví dụ

class car {
    constructor(brand) {
        this._carName = brand;
    }
    get carname() {
        return this._carName;     
    }
    set carname(x) {
        this._carName = x ;     
    }    
}

const car1 = new car("Toyota");
car1.carName = "Kia";
document.getElementById('demo').innerHTML = car1.carname;

Xem kết quả

Hoisting

Không giống như các hàm và các khai báo JavaScript khác, khai báo lớp không được nâng lên.

Điều đó có nghĩa là chúng ta phải khai báo một lớp trước khi chúng ta có thể sử dụng nó.

Lưu ý: Đối với các khai báo khác, chẳng hạn như các hàm, chúng ta sẽ KHÔNG gặp lỗi khi cố sử dụng nó trước khi nó được khai báo, vì hành vi mặc định của các khai báo JavaScript là lưu trữ và nâng lên trên (di chuyển khai báo lên trên cùng).

Xem lại bài viết JS Hoisting.