Kế thừa thuộc tính và phương thức

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 28 trên 56.

Khi một lớp kế thừa lớp khác, nó kế thừa tất cả thuộc tính và phương thức từ lớp cha. Điều này có nghĩa là các lớp con tự động có quyền truy cập vào mọi thứ được định nghĩa trong lớp cha.

Hãy tạo một lớp cha có các thuộc tính và phương thức:

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  eat() {
    return `${this.name} is eating`;
  }
  
  sleep() {
    return `${this.name} is sleeping`;
  }
}

Bây giờ, hãy tạo một lớp con kế thừa từ Animal:

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

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

const rex = new Dog("Rex", 3, "German Shepherd");

Giờ đây, dù chúng ta không định nghĩa eat() và sleep() trong lớp Dog, ta vẫn có thể dùng các phương thức này:

console.log(rex.eat());  // Đầu ra: Rex đang ăn
console.log(rex.sleep()); // Đầu ra: Rex đang ngủ

Và chúng ta có thể truy cập tất cả thuộc tính được kế thừa:

console.log(rex.name);  // Đầu ra: Rex
console.log(rex.age);   // Đầu ra: 3
console.log(rex.breed); // Đầu ra: German Shepherd

Thử thách

Tạo lớp Cake kế thừa từ Dessert và xuất lớp đó. Lớp Cake cần có:

Tất cả thuộc tính và phương thức kế thừa từ Dessert
Một thuộc tính mới flavor
Một phương thức mới addCandles() trả về chuỗi “Added candles to ${this.name}!”

Tự làm thử

import { Dessert } from './desserts.js';
import { Cake } from './desserts.js';

// Code kiểm tra, đừng chỉnh sửa
const myCake = new Cake("Birthday Cake", 300, "Chocolate");
console.log(myCake.describe());   // Đầu ra phải là "Birthday Cake has 300 calories"
console.log(myCake.flavor);       // Đầu ra phải là "Chocolate"
console.log(myCake.addCandles()); // Đầu ra phải là "Added candles to Birthday Cake!"