클래스 상속하기: extends와 super()

hzn·2022년 9월 22일
0

JavaScript

목록 보기
15/17
post-thumbnail

1. 클래스 만들기

  • 클래스세부사항(속성값)이 들어가지 않은 청사진.
  • 클래스에 세부사항을 넣어 만들어진 것인스턴스 객체.
  • '생성자'를 통해 세부사항을 넣어준다.

Person 클래스를 통해 만들어진 인스턴스는

  • name,age, gender, interests 속성과
  • greeting, farewell 메서드를 가지고 있음.
  • 🌟first, last는 인스턴스의 속성이 아닌 constructor(생성자)의 매개변수!!🌟
class Person {
  constructor(first, last, age, gender, interests) { // 여기는 속성 이름이 아니고 그냥 constructor의 매개변수들(인스턴스 초기화 할 때 필요한)..
    // this.XX로 쓰여진게 속성들이다.
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name.first}`);
  };

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  };
}

2. 클래스의 인스턴스 만들기

인스턴스 han, leia는 클래스 Person의 속성과 메서드를 가져오고 쓸 수 있다.

let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
han.age // 25
han.greeting(); // Hi! I'm Han

let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']);
leia.farewell(); // Leia has left the building. Bye for now

3. 클래스 상속하기 (extends 키워드, super() 연산자)

  • extends 키워드로 상위 클래스를 상속받을 수 있다.
  • super()의 매개변수를 통해 상위 클래스의 멤버(❗️속성이 아님. 구분할 것❗️)를 일일히 쓰지 않고 간단하게 상속받을 수 있다.

Teacher는 extends 키워드, super() 연산자를 통해 클래스 Person을 상속받은 클래스

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests); // 상속받을 멤버

    // Teacher만의 속성, 메서드만 작성하면 됨.
    this.subject = subject;
    this.grade = grade;
  }
}

let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
snape.greeting(); // Hi! I'm Severus.
snape.farewell(); // Severus has left the building. Bye for now.
snape.age // 58
snape.subject; // Dark arts

constructor의 매개변수로 들어가야 하는 것:

  • 인스턴스 만들 때 인자로 들어올 멤버들(매개변수)
  • 상속받은 클래스에서 받아올 멤버들(매개변수)

QQQ) super 없이 extends만 쓸 수 는 없나?

0개의 댓글