JS 상속

sam_il·2022년 7월 22일
0

JavaScript

목록 보기
15/22
post-thumbnail

상속

객체지향 프로그래밍에서 상속의 개념은 현실에서 사용하는 상속이란 단어의 뜻과 비슷하다.

프로그래밍에서 상속은 확장이라고도 부르며 특정 클래스(부모 클래스)의 속성과 메서드를 하위(자식) 클래스가 물려받는 것을 의미한다. 상속받는 자식 클래스에서는 부모의 소스코드를 복사할 필요 없이 부모 클래스의 기능과 속성을 모두 사용할 수 있을 뿐 아니라 필요한 기능을 추가해 확장할 수도 있다.


! OOP의 기본 : 생성자는 상속이 안된다, private도 상속이 안된다!

  1. 코드 재사용
    상속을 하는 가장 큰 이유는 코드의 재사용 때문이다.

  2. 중복 코드 제거
    클래스 상속은 중복 코드 제거 기능을 가지고 있다. 상속을 이용해 중복 코드를 없애는 방법은 간단하다.


  3. 확장
    상속을 활용하면 코드를 아주 쉽게 확장할 수 있다. (상속의 궁극적인 목표)

    상속 사용x 경우1

    상속 사용x 경우2

상속 사용O


일반 객체지향 프로그래밍의 상속 구현 방법을 알아본 후 자바스크립트의 상속 구현 방법을 알아보자

  1. 일반 OOP에서 클래스 상속
  • 일반 객체지향 프로그래밍에서는 extends라는 클래스 상속 전용 명령(상속은 직접적 관계)을 이용해 클래스 상속을 구현한다 (JAVA)

! 생성자의 특성은 메서드와 같다. 그러나 초기화 메서드이므로 생성자명은 클래스명과 동일해야한다는 특성이 있다. (리턴 타입 없음)

※ staruml (상속 계층도 그리는 연습~) 미리 대략적이며 구체적으로 그리기



자식 클래스와 부모 클래스 연동처리
클래스 상속을 사용하다 보면 자식 클래스에서 부모 클래스의 생성자를 호출해야 하는 경우가 발생한다.
1. 자바스크립트 최상위 부모 Object클래스

상속 구현 시 부모클래스의 생성자에 매개변수가 있는 경우 자식 클래스에서 부모 클래스의 생성자의 호출해 매개변수 값을 전달해야 한다.

  • 자바스크립트에서 부모 생성자 호출하기
function 자식클래스([param1, param2, ……]) {
         부모클래스.call(this [, param1, param2, ….]);
}

부모클래스의 생성자를 호출할 때 함수객체에서 제공하는 call()메서드를 이용해 첫 번째 매개변수에 자식 인스턴스를 전달하고, 두 번째 매개변수 이후부터는 부모의 생성자로 전달할 데이터를 전달해 준다.

예제

자바스크립트 메서드 오버라이드
클래스 상속을 사용하다 보면 종종 물려받은 부모의 기능을 그대로 사용하지 않고 재정의해야 하는 경우가 발생한다. 이 경우를 메서드 오버라이드라고 한다.

메서드 오버라이드(override) : 자식 클래스에서 부모 클래스 기능(메서드)를 재정의할 때 사용하는 기능. 선언부는 같고 구현부만 다르게 하는 수정(modify, change)의 개념으로 생각하면 편하다!

  • 오버로딩(overloading)은 new!의 개념

주로 다음과 같은 경우 사용한다.
1) 부모 클래스의 기능을 사용하지 않고 자식 클래스에서 구현한 기능을 사용하고 싶은 경우
2) 부모 클래스의 기능을 자식 클래스에서 확장하고 싶은 경우

1)예제

2)예제

*이 예제에서의 call은 자바에서의 경우 super와 동일하다.

자바스크립트 메서드 오버로딩
메서드 오버로딩(overloading)은 동일한 이름을 가지고 여러 개의 메서드를 만든 후 매개변수 타입과 개수에 맞는 메서드가 자동으로 호출되는 기능을 말한다.

메서드 오버로딩(overloading) : 오버로딩(overloading)은 new의 개념.

자바스크립트에서는 매개변수 정보를 담고있는 arguments를 이용해 오버로딩을 흉내낸다. 오버로딩은 함수와 메서드에서 동일하게 사용할 수 있다.

! 생성자도 메서드의 일부이다. 단지 선언부에 return타입만 없을 뿐 메서드와 동일하다.

❗ 오버라이딩과 오버로딩의 차이점 꼭 숙지하기


매개변수, arguments, 인자값, 파라미터 다 똑같은 의미이다~~

오버라이딩, 오버로딩 차이점

오버라이딩 : 메서드의 선언부는 같고 구현부만 다름 (modifiy, change)
오버로딩 : 매개변수의 개수가 다르기 때문에 선언부도 다르고 구현부도 다름 (new)

constructor 프로퍼티 활용
일반적으로 클래스를 만들면 자동으로 prototype의 constructor라는 프로퍼티가 만들어진다. 다시 말해 new연산자로 인스턴스화 되는 시점에 호출되는 것이다. 이 프로퍼티에는 해당 클래스이 생성자 정보가 기본값으로 담긴다. 달리 말하면 constructor 프로퍼티를 이용해 사용하는 객체(인스턴스)가 어떤 클래스의 인스턴스인지 알아낼 수가 있다는 것이다(단독 클래스라면 가능함). 하지만 상속관계를 맺는 경우 자식클래스의 constructor프로퍼티에는 기본적으로 부모클래스의 생성자가 담기게 되어 constructor 프로퍼티를 가지고는 해당 객체의 클래스를 알아 낼 수가 없다.


  • 자식 클래스의 constructor를 명확히 지정해주면 됨
  • 자바스크립트에서는 비교하는 일이 많지 않지만 자바에서는 이러한 용도로 많이 쓰임 (instanceOf)

클래스 상속 규칙
아무때나 사용해서는 안되며 반드시 상속관계가 성립될때만 사용해야 한다.

  • OOP 언어에서의 is a관계와 has a 관계가 있음
  • circle is a shape 처럼 성립될때

profile
🍀

0개의 댓글