Tìm hiểu kế thừa trong JavaScript

Giải thích:

• LivingBeing có phương thức breathe().

• Animal kế thừa LivingBeing, có thêm eat().

• Dog kế thừa Animal, có thêm bark().

• myDog có thể sử dụng tất cả các phương thức từ cả ba lớp.

Sử dụng phương thức của lớp cha trong lớp con trong JavaScript

Cách gọi phương thức của lớp cha trong lớp con bằng super.methodName()

Trong JavaScript, từ khóa super.methodName() được sử dụng để gọi phương thức của lớp cha từ lớp con.

Cách hoạt động:

• Nếu lớp con định nghĩa lại một phương thức đã có trong lớp cha, phương thức trong lớp con sẽ được ưu tiên.

• Tuy nhiên, nếu muốn sử dụng lại logic của lớp cha trong phương thức bị ghi đè, ta có thể gọi super.methodName() bên trong lớp con.

Ví dụ minh họa về gọi phương thức lớp cha trong lớp con

class Parent {
    greet() {
        console.log("Hello from Parent class.");
    }
}

class Child extends Parent {
    greet() {
        super.greet(); // Gọi phương thức từ lớp cha
        console.log("Hello from Child class.");
    }
}

const obj = new Child();
obj.greet();

/*
Output:
Hello from Parent class.
Hello from Child class.
*/

Giải thích:

• Child kế thừa từ Parent.

• Child ghi đè phương thức greet(), nhưng vẫn gọi super.greet() để chạy phương thức gốc từ Parent.

• Kết quả: Cả thông điệp từ Parent và Child đều được in ra.

Ví dụ khác khi lớp cha có tham số:

class Vehicle {
    constructor(brand) {
        this.brand = brand;
    }

    showInfo() {
        console.log(`This vehicle is a ${this.brand}.`);
    }
}

class Car extends Vehicle {
    constructor(brand, model) {
        super(brand); // Gọi constructor của lớp cha
        this.model = model;
    }

    showInfo() {
        super.showInfo(); // Gọi phương thức từ lớp cha
        console.log(`Model: ${this.model}`);
    }
}

const myCar = new Car("Toyota", "Camry");
myCar.showInfo();

/*
Output:
This vehicle is a Toyota.
Model: Camry
*/

Giải thích:

• Car kế thừa từ Vehicle.

• super(brand) được gọi trong constructor của Car để sử dụng lại logic khởi tạo của Vehicle.

• super.showInfo() được gọi trong showInfo() để hiển thị thông tin từ Vehicle trước khi thêm thông tin của Car.

Thuộc tính và phương thức tĩnh trong kế thừa (Static Inheritance) trong JavaScript

Giới thiệu về thuộc tính và phương thức tĩnh (static)

• Trong JavaScript, thuộc tính và phương thức tĩnh (static) là những thành phần thuộc về lớp (class) thay vì đối tượng (instance).

• Các phương thức hoặc thuộc tính tĩnh không thể được gọi bằng đối tượng, mà phải gọi trực tiếp từ lớp.

class Example {
    static staticMethod() {
        console.log("This is a static method.");
    }
}

Example.staticMethod(); //  Gọi từ lớp
// new Example().staticMethod();  Lỗi: Không thể gọi từ đối tượng

Cách kế thừa phương thức tĩnh từ lớp cha

• Khi một lớp con kế thừa từ lớp cha (extends), các phương thức static của lớp cha cũng được kế thừa.

• Lớp con có thể gọi phương thức static của lớp cha bằng super.methodName().

Ví dụ minh họa về kế thừa phương thức tĩnh

class Parent {
    static parentMethod() {
        console.log("Static method in Parent class.");
    }
}

class Child extends Parent {
    static childMethod() {
        console.log("Static method in Child class.");
    }
}

Child.parentMethod(); //  Kế thừa từ lớp cha
Child.childMethod();  //  Phương thức riêng của lớp con

/*
Output:
Static method in Parent class.
Static method in Child class.
*/

Giải thích:

• Child kế thừa Parent, do đó có thể gọi Parent.parentMethod() mà không cần định nghĩa lại.

• Child.childMethod() là phương thức tĩnh riêng của Child.

Gọi phương thức tĩnh của lớp cha bằng super trong lớp con

class Vehicle {
    static type() {
        return "General Vehicle";
    }

    static showType() {
        console.log(`Vehicle type: ${this.type()}`);
    }
}

class Car extends Vehicle {
    static type() {
        return "Car";
    }

    static showType() {
        super.showType(); // Gọi phương thức của lớp cha
        console.log(`Specific type: ${this.type()}`);
    }
}

Car.showType();

/*
Output:
Vehicle type: Car
Specific type: Car
*/

Giải thích:

• Car kế thừa từ Vehicle và ghi đè phương thức type().

• Khi gọi super.showType(), nó sử dụng logic của Vehicle.showType() nhưng áp dụng Car.type() vì this tham chiếu đến Car.

Khi nào nên sử dụng kế thừa trong JavaScript?

Kế thừa (Inheritance) là một tính năng quan trọng trong lập trình hướng đối tượng, giúp tái sử dụng mã nguồn và tổ chức chương trình một cách rõ ràng hơn. Tuy nhiên, việc sử dụng kế thừa không phải lúc nào cũng là lựa chọn tốt. Dưới đây là các trường hợp nên và không nên sử dụng kế thừa trong JavaScript.

Những trường hợp nên sử dụng kế thừa

Khi có quan hệ "is-a" (là một loại của...)

• Nếu một lớp con thực sự là một phiên bản cụ thể của lớp cha, kế thừa là hợp lý.

• Ví dụ: Car là một loại Vehicle, Dog là một loại Animal.

Ví dụ minh họa:

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log("Some generic sound...");
    }
}

class Dog extends Animal {
    makeSound() {
        console.log("Woof! Woof!");
    }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); // Output: Woof! Woof!

Lý do hợp lý:

• Dog có quan hệ "is-a" với Animal.

• Dog có thể mở rộng Animal bằng cách ghi đè phương thức makeSound().

Khi có nhiều lớp chia sẻ chung hành vi

• Nếu nhiều lớp có cùng thuộc tính và phương thức, kế thừa giúp tránh lặp lại mã nguồn.

• Ví dụ: Car, Bike, và Bus đều có thể kế thừa từ Vehicle thay vì viết lại cùng một logic.

Ví dụ minh họa:

class Vehicle {
    constructor(brand) {
        this.brand = brand;
    }

    start() {
        console.log(`${this.brand} is starting...`);
    }
}

class Car extends Vehicle {
    drive() {
        console.log(`${this.brand} is driving.`);
    }
}

class Bike extends Vehicle {
    ride() {
        console.log(`${this.brand} is riding.`);
    }
}

const myCar = new Car("Toyota");
myCar.start(); // Output: Toyota is starting...
myCar.drive(); // Output: Toyota is driving.

const myBike = new Bike("Yamaha");
myBike.start(); // Output: Yamaha is starting...
myBike.ride();  // Output: Yamaha is riding.

Lý do hợp lý:

• Tránh lặp lại phương thức start() ở cả Car và Bike.

• Giúp mã nguồn gọn gàng và dễ bảo trì hơn.

Khi muốn mở rộng một lớp mà không làm thay đổi lớp gốc

• Nếu cần thêm tính năng mới cho một lớp hiện có mà không muốn sửa đổi nó, kế thừa là một giải pháp tốt.

Ví dụ minh họa:

class User {
    constructor(name) {
        this.name = name;
    }

    login() {
        console.log(`${this.name} logged in.`);
    }
}

class Admin extends User {
    deleteUser(user) {
        console.log(`${this.name} deleted ${user.name}`);
    }
}

const admin = new Admin("Alice");
const user = new User("Bob");

admin.login();      // Output: Alice logged in.
admin.deleteUser(user); // Output: Alice deleted Bob

Lý do hợp lý:

• Admin có tất cả chức năng của User nhưng có thêm khả năng deleteUser().

• Không cần sửa đổi User, giúp mã nguồn linh hoạt hơn.

Những trường hợp không nên sử dụng kế thừa

Khi quan hệ không thực sự là "is-a"

• Nếu mối quan hệ giữa các lớp không thực sự phản ánh "is-a", không nên dùng kế thừa mà nên dùng composition.

• Ví dụ: Một Printer không phải là một Computer, nhưng nó có thể được sử dụng bởi một Computer.

Giải pháp thay thế: Dùng composition thay vì kế thừa.

class Printer {
    print(document) {
        console.log(`Printing: ${document}`);
    }
}

class Computer {
    constructor(brand) {
        this.brand = brand;
        this.printer = new Printer(); // Sử dụng composition thay vì kế thừa
    }

    printDocument(document) {
        this.printer.print(document);
    }
}

const myComputer = new Computer("Dell");
myComputer.printDocument("Report.pdf");

/*
Output:
Printing: Report.pdf
*/

class Logger {
    log(message) {
        console.log(`Log: ${message}`);
    }
}

class Payment {
    constructor() {
        this.logger = new Logger(); // Dùng composition thay vì kế thừa
    }

    processPayment(amount) {
        this.logger.log(`Processing payment of $${amount}`);
    }
}

const payment = new Payment();
payment.processPayment(100);

/*
Output:
Log: Processing payment of $100
*/

class Utility {
    log(message) {
        console.log(message);
    }
}

class User extends Utility {} //  Không hợp lý!

const user = new User();
user.log("Hello!"); // Output: Hello!

const Utility = {
    log: (message) => console.log(message),
};

Utility.log("Hello!"); // Output: Hello!