Sử dụng super

Thuộc phần Lập trình hướng đối tượng trong hành trình JavaScript của Coddy. Bài học 37 trên 56.

Khi ghi đè một phương thức, bạn vẫn có thể truy cập phiên bản gốc của lớp cha bằng cách dùng super.methodName(). Nhờ vậy, bạn có thể mở rộng hoặc chỉnh sửa hành vi của lớp cha thay vì thay thế hoàn toàn.

Tạo một lớp cha có một phương thức:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

Tạo một lớp con kế thừa từ lớp cha:

class Dog extends Animal {
  makeSound() {
    // Gọi phương thức (method) của lớp cha trước
    const parentSound = super.makeSound();
    // Sau đó mở rộng thêm chức năng
    return `${parentSound}, but also Woof!`;
  }
}

Tạo một đối tượng thuộc lớp con:

const myDog = new Dog();
console.log(myDog.makeSound());
// Đầu ra: "Generic animal sound, but also Woof!"

Từ khóa super cho phép bạn gọi các phương thức của lớp cha, đồng thời thêm chức năng riêng trong lớp con.

Thử thách

Bạn được cung cấp một lớp Shape có phương thức calculateArea() và một lớp Rectangle kế thừa từ lớp đó. Nhiệm vụ của bạn là ghi đè phương thức calculateArea() trong Rectangle bằng cách dùng super.

Nhiệm vụ của bạn là hoàn thành phương thức calculateArea() trong lớp Rectangle để:

Gọi phương thức calculateArea() của lớp cha bằng super và lưu kết quả
Tính diện tích thực tế của hình chữ nhật: width × height
Trả về một chuỗi kết hợp: thông báo của lớp cha + diện tích hình chữ nhật. Ví dụ: Calculating area... Rectangle area: 50

Tự làm thử

import { Shape } from './shapes.js';
import { Rectangle } from './shapes.js';

// Code kiểm tra, không chỉnh sửa
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // Kết quả mong đợi: "Calculating area... Rectangle area: 50"