S2 . Classes in JavaScript

Haizel·2022년 11월 21일

Front-End Developer 되기

목록 보기

25/70

부모 클래스 > 자식 클래스로 상속하는 방법

Teacher() 생성자 함수 정의

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}

여기서 call() 함수란 : call() 함수의 첫번째 매개변수는 다른 곳에서 정의된 함수를 현재 컨텍스트에서 실행한다. 실행하고자 하는 함수의 첫 번째 매개변수로 this를 전달하고 나머지는 실제 함수 실행에 필요한 인자들을 전달하면 된다.

Teacher()의 생성자는 Person()을 상속받았으므로 같은 매개변수들이 필요하다. 따라서 동일한 매개변수들을 call()의 인자로 전달하여 실행한다.

하지만 새로운 생성자 `teacher` 엔 참조만 있고, `Person() 생성자의 Prototype 속성`은 없다.

따라서 아래 코드를 추가한다.

Teacher()의 프로토타입과 생성자 참조 설정하기

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

이를 통해 Teacher()가 Person()을 상속한다.

Class 문법으로 상속하기

#extends #super()

만약 Person을 class 문법으로 상속받아 Teacher 클래스로 만들고 싶다면, 이작업은 하위 클래스 생성 이라고 부른다.
하위 클래스 생성 은 extends 키워드를 통해 상속받을 클래스를 명시할 수 있다.

extends 키워드 : 클래스를 다른 클래스의 자식으로 만들기 위해 'class 선언' 또는 'class 식'으로 사용된다.
구문 ㅣ class ChildClass extends ParentClass { ... }

확장( 클래스)의 .prototype은 Object 또는 null이어야 한다.

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    this.name = {
      first,
      last
    };

  this.age = age;
  this.gender = gender;
  this.interests = interests;
  // subject and grade are specific to Teacher
  this.subject = subject;
  this.grade = grade;
  }
}

constructor()에서 첫번째로 super() 연산자를 정의하면 코드를 조금 더 읽기 쉬워진다. 아래 코드는 상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드이다.

super 키워드 : 부모 오브젝트의 함수를 호출할 때 사용한다.

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);

    // subject and grade are specific to Teacher
    this.subject = subject;
    this.grade = grade;
  }
}

`extends`, `super()` 예시

class Square extends Polygon {
  constructor(length) {
    // 여기서, length와 함께 부모 클래스의 생성자를 호출
    // Polygon의 너비 및 높이가 제공됨
    super(length, length);
    // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를
    // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}