TIL 42일차_상속 방법 두가지: pseudoClassical패턴과 ES6+ class문법

pseudoclassical 상속 방법

상위클래스 Person은 다음과 같다.

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

Person.prototype.greeting = function() {
  alert('Hi! I\'m ' + this.name.first + '.');
};

1. 상속받아서 생성자함수 수정하기.

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

  this.subject = subject;
}

상위클래스의 생성자함수를 실행할 때,
그냥 Person()을 실행하게되면 Person의 this는 undefined가 된다.

따라서 call()함수는 첫번째 매개변수에 this를 전달하여,
다른 곳에서 정의된 함수를 현재 컨텍스트에서 실행할 수 있도록 한다.

2. 상위클래스의 프로토타입을 복사하여 하위클래스의 프로토타입에 참조하기.

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

3. 하위클래스의 프로토타입의 constructor에 하위클래스 생성자함수 참조하기.

현재 상위클래스의 프로토타입을 복사하여 참조하였으므로,
Teacher의 constructor도 Person을 가리키고 있다.

따라서 Teacher의 constructor을 재할당해줘야 한다.

Teacher.prototype.constructor = Teacher;

4. 하위 생성자 함수의 메소드 수정하기.

overwriting하면 된다.

Teacher.prototype.greeting = function() {
불라불라
}

ES6+ class 문법으로 상속 방법

class 키워드를 사용하면 쉽게 상속할 수 있다.
extends와 super만 기억하자.

1. 상속받고 constructor 수정하기.

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 키워드만 사용해줘도 상위클래스의 모든 생성자함수, 메소드가 상속된다.
이외에 추가하는 내용들은 하위클래스만의 속성과 메소드를 수정 및 추가해주는 과정이다.

constructor()에서 this를 사용하기 전에 super()연산자를 정의하면 쉽게 수정할 수 있다.
super() 연산자는 상위클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위클래스의 멤버를 상속받을 수 있는 코드이다.

2. 메소드 수정하기

//함수추가는 아래처럼 prototype에 직접 추가해도 되고
Teacher.prototype.sayHi = function(){
    함수내용    
}

//상위클래스의 greeting메소드에 가공을 추가하고 싶을때는 super연산자를 쓴다.
class Teacher extends Person{
    greeting(){
        super.greeting();
        console.log('hihihi') //추가한 코드
    }
}

super()

constructor를 수정할 때는
constructor함수 안에 super(a,b,c) 형식으로 사용한다.

method를 수정할 때는
메소드 안에 super.함수명(a,b,c) 형식으로 사용한다.