Gidhub BE Developer

클래스(Class) 상속

2018-11-13
goodGid

  • 클래스 다중 상속에 대해 알아보자.

  • 겹치는 메소드를 제거하자.

  • 즉 getName()과 getAge()가 중복된다.


  • 구조를 바꿔 해결해보자.

  • gomu 인스턴스는 prototype chaining을 통해 getPosition(), getAge(), getName() 메소드 사용이 가능해진다.


  • 그렇다면 이런 다중 상속 구조는 어떻게 만들어야할까?

  • 즉 Employee prototype에 Person 인스턴스를 할당하면 된다.

  • 그런데 추가로 한 단계를 더 거쳐야한다.

  • 저 코드는 기존의 Employee prototype를 완전히 새로운 객체로 덮어씌운다.

  • 본래 갖고있던 기능을 다시 부여해줄 필요가 있다.

  • 이렇게하면 서로 다른 2개의 Class가 Super / Sub 관계를 갖게된다.


  • 코드로 표현하면 다음과 같다.

  • 주의할점은 getPosition()을 선언하는 위치이다.

  • 당연히 Employee.prototype = new Person()보다 먼저 선언을 하면 안된다.


  • 인스턴스를 생성하고 그 값을 살펴보면 다음과 같다.

  • 좀 더 자세히보자.


  • 하지만 완벽하다 할 수 없다.

  • 그 이유는 다음 부분 때문이다.

  • 만약 Employee의 인스턴스에서 name 프로퍼티를 지운다면 undefined가 호출돼야하지만

  • 실제로는 prototype chaining 때문에 “이름 없음”이 출력된다.

  • 즉 이 그림에서 해당 부분을 지워야 한다.


  • 어떻게 해야할까?

  • 우리는 반드시 Person의 인스턴스가 필요한게 아니라 Person.prototype이 필요한 것이다.

  • 그렇기 때문에 Person.prototype을 상속받으며 아무런 프로퍼티가 존재하지 않는 인스턴스(=Bridge)를 만든다.

  • 코드로 나타내면

  • 객체의 값을 보면 다음과 같다.


  • 좀 더 효율적으로 바꿔보자.

  • Bridge() 함수는 매개체 역할을 할 뿐 실제 코드상에 영향을 주지 않는다.

  • 그래서 함수화해서 사용하는 코드 스타일을 추천한다.

  • 이 방식으로 코드를 다시 짜면 보다 간편하게 코딩이 가능하다.

  • 이런 방식으로인해 다중 상속이 필요한 클래스는 extendClass() 함수를 호출해주기만 하면 된다.

  • 메소드뿐만 아니라 프로퍼티에 대해서도 상속을 시킬 수 있다.

  • 중복되는 프로퍼티를

  • Child.prototype.superClass = Parent 코드를 통해

  • Parent의 프로퍼티를 상속받아 사용할 수 있게 된다.


  • 최종 코드이다.

  • 그런데 ES6에서는 굳이 extendClass()를 만들필요가 없어졌다.


Comments

Content