Kế thừa lớp JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về kế thừa lớp JavaScript với sự trợ giúp của các ví dụ.

Kế thừa giai cấp

Kế thừa cho phép bạn xác định một lớp có tất cả các chức năng từ một lớp cha và cho phép bạn thêm nhiều hơn nữa.

Sử dụng kế thừa lớp, một lớp có thể kế thừa tất cả các phương thức và thuộc tính của một lớp khác.

Kế thừa là một tính năng hữu ích cho phép mã có thể tái sử dụng.

Để sử dụng kế thừa lớp, bạn sử dụng extendstừ khóa. Ví dụ,

// parent class
class Person { 
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello ${this.name}`);
    }
}

// inheriting parent class
class Student extends Person {

}

let student1 = new Student('Jack');
student1.greet();

Đầu ra

Hello Jack

Trong ví dụ trên, Studentlớp kế thừa tất cả các phương thức và thuộc tính của Personlớp. Do đó, Studentlớp bây giờ sẽ có thuộc nametính và greet()phương thức.

Sau đó, chúng tôi truy cập greet()phương thức của Studentlớp bằng cách tạo một student1đối tượng.

Từ khóa super () JavaScript

Các supertừ khóa được sử dụng trong một lớp trẻ biểu thị lớp cha của nó. Ví dụ,

// parent class
class Person { 
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello ${this.name}`);
    }
}

// inheriting parent class
class Student extends Person {

    constructor(name) {
    
        console.log("Creating student class");
        
        // call the super class constructor and pass in the name parameter
        super(name);
    }

}

let student1 = new Student('Jack');
student1.greet();

Ở đây, lớp superbên trong Studentđề cập đến Personlớp. Do đó, khi phương thức khởi tạo của Studentlớp được gọi, nó cũng gọi phương thức khởi tạo của Personlớp gán một thuộc tính tên cho nó.

Phương pháp hoặc thuộc tính ghi đè

Nếu một lớp con có cùng phương thức hoặc thuộc tính với tên của lớp cha, nó sẽ sử dụng phương thức và thuộc tính của lớp con. Khái niệm này được gọi là ghi đè phương thức. Ví dụ,

// parent class
class Person { 
    constructor(name) {
        this.name = name;
        this.occupation = "unemployed";
    }
    
    greet() {
        console.log(`Hello ${this.name}.`);
    }
 
}

// inheriting parent class
class Student extends Person {

    constructor(name) {
        
        // call the super class constructor and pass in the name parameter
        super(name);
        
        // Overriding an occupation property
        this.occupation = 'Student';
    }
    
    // overriding Person's method
    greet() {
        console.log(`Hello student ${this.name}.`);
        console.log('occupation: ' + this.occupation);
    }
}

let p = new Student('Jack');
p.greet();

Đầu ra

Hello student Jack.
occupation: Student

Ở đây, thuộc occupationtính và greet()phương thức hiện diện trong Personlớp cha và Studentlớp con . Do đó, Studentlớp ghi đè thuộc occupationtính và greet()phương thức.

Sử dụng Thừa kế

Vì một lớp con có thể kế thừa tất cả các chức năng của lớp cha, điều này cho phép mã có thể tái sử dụng.
Khi một chức năng được phát triển, bạn có thể kế thừa nó một cách đơn giản. Không cần phải phát minh lại bánh xe. Điều này cho phép mã sạch hơn và dễ bảo trì hơn.
Vì bạn cũng có thể thêm các chức năng của riêng mình trong lớp con, bạn chỉ có thể kế thừa các chức năng hữu ích và xác định các tính năng cần thiết khác.