Front-end/JavaScript

[JS] 자바스크립트에서 상속

파리외 개발자 2022. 6. 23. 20:46

상속

여기 하나의 클래스가 있고 속성1개와 메서드1개를 가지고 있다.

또 하나의 클래스를 정의하는데 아무 내용도 없는 클래스로 만든다.

빈 클래스 MyChild에 new를 사용해 아까 만든 클래스 MyParent를 상속받는다.

빈 클래스를 child의 이름으로 인스턴스 생성을 한 뒤

부모클래스의 메소드인 method1을 호출해본다.

빈 클래스의 인스턴스인 child가 상속이 되어서 부모클래스의 메소드를 호출할 수 있다.

 

상속 - 확장

CellPhone을 부모 클래스로 생성하고 DmbCellPhone클래스에 상속을 시킨다.

이번엔 자식클래스를 빈 클래스로 만들지 말고 프로퍼티와 메서드를 함께 생성한다.

상속받은 자식클래스의 인스턴스를 생성하고 부모클래스의 메서드와 자신의 메서드를 모두 호출해본다.

상속은 부모의 메서드와 프로퍼티를 사용할 수도 있으며 자신의 것 또한 사용이 가능하다.

 

상속 - 중복성 제거

공통된 내용인 method1을 가지는 클래스 두 개가 있다. (method2는 내용이 다르므로 다른 메서드)

클래스 A와B의 인스턴스는 공통된 프로퍼티인 property1에 접근하며

동일한 내용의 method1을 호출하고 있다.

공통된 부분들을 각 클래스에서 제거한 뒤 하나의 부모클래스에 작성하고

두 클래스에 상속한다.

아까와 같은 내용을 실행해보니 똑같이 동작하는 것을 볼 수 있다.

이렇게 상속으로 중복되는 코드들을 제거할 수 있다.

 

상속 - 연동, call( )

프로퍼티와 메서드를 하나씩 가지는 클래스를 생성한다.

자식클래스를 생성하고 상속을 받은 뒤 인스턴스를 생성한다.

생성한 인스턴스의 프로퍼티를 호출하고 상속받은 부모의 메소드 또한 호출해본다.

상속받은 자식의 인스턴스를 생성할 때

부모의 인스턴스가 먼저 생성되고

call함수를 통해 생성자가 호출되며 자식인스턴스가 생성된 후

부모 인스턴스에 추가되어 

param1인자값으로 받은 값이 부모속성 property1에 추가되었다.