×

Cách sử dụng super trong JavaScript ES6 classes

Avatar of luongtu
luongtu 0 Views

Từ khóa super trong JavaScript được sử dụng để gọi các hàm từ lớp cha trong lớp con. Nó thường được sử dụng trong các lớp con được định nghĩa bằng cú pháp ES6 class. super có thể được sử dụng trong constructor của lớp con để gọi constructor của lớp cha, cũng như để gọi các phương thức của lớp cha từ lớp con.

1. Sử dụng super trong Constructor

Khi một lớp con có constructor, bạn cần gọi super() để đảm bảo rằng constructor của lớp cha được thực thi. Điều này đặc biệt quan trọng khi lớp cha thực hiện một số khởi tạo mà lớp con cần.

Ví dụ:

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name); // Gọi constructor của lớp cha
    }

    speak() {
        super.speak(); // Gọi phương thức speak của lớp cha
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog('Rex');
dog.speak();
// Rex makes a noise.
// Rex barks.

2. Sử dụng super để gọi phương thức của lớp cha

Bạn có thể sử dụng super để gọi các phương thức của lớp cha từ các phương thức của lớp con.

Ví dụ:

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Cat extends Animal {
    constructor(name) {
        super(name); // Gọi constructor của lớp cha
    }

    speak() {
        super.speak(); // Gọi phương thức speak của lớp cha
        console.log(`${this.name} meows.`);
    }
}

let cat = new Cat('Whiskers');
cat.speak();
// Whiskers makes a noise.
// Whiskers meows.

3. Gọi phương thức tĩnh của lớp cha

Bạn cũng có thể sử dụng super để gọi các phương thức tĩnh của lớp cha.

Ví dụ:

class Animal {
    static info() {
        console.log('Animals are multicellular organisms.');
    }
}

class Bird extends Animal {
    static info() {
        super.info(); // Gọi phương thức tĩnh info của lớp cha
        console.log('Birds have feathers.');
    }
}

Bird.info();
// Animals are multicellular organisms.
// Birds have feathers.

Kết luận

Từ khóa super là một công cụ mạnh mẽ trong JavaScript ES6, giúp bạn tận dụng lại các chức năng đã có trong lớp cha và mở rộng chúng trong lớp con. Sử dụng super một cách hợp lý giúp mã nguồn của bạn trở nên gọn gàng và dễ bảo trì hơn.

Comments

Bài viết liên quan