자바스크립트 Class의 상속

자바스크립트에서 class도 자바에서 처럼 상속이 가능합니다.

 

자바스크립트에서의 class 상속

위 그림은 extends를 이용하여

 

Shape라는 클래스를 Rectangle, Triangle 두 개의 클래스에 상속을 내린 것을 보여줍니다.

(상속 내린 Shape는 부모 클래스 상속받은 Rectangle, Triangle은 자식 클래스라고 불립니다)

 

 

우선, Rectangle 클래스를 이용하여 객체를 보면

 

Rectangle 클래스 안에 어떠한것도 정의되어있지 않지만

 

Shape 클래스에 정의된 함수와 변수들을 사용할수 있게 됩니다.

 

그래서 rectangle 이라는 객체가 printShape라는 함수에 접근하여 width, height, color를 출력할 수 있게 됩니다.

 

 

다음, Trangle 클래스 또한 Shape 클래스를 상속받았지만 printShape함수를 다시 정의하고 있습니다.

 

이런 경우를 함수 오버 라이딩이라고 합니다. 

 

함수 오버 라이딩이 되면 부모 클래스에 있는 함수를 호출하는 것이 아니라 자식에 다시 정의한 함수를 호출하게 됩니다.

 

하지만 부모클래스에 있는 함수가 사라지는 것은 아닙니다.

 

super를 이용한 부모클래스 함수에 접근

위 그림과 같이

 

super API를 사용하여 부모 클래스의 정의된 함수도 호출이 가능합니다.

 

 

추가적으로 첫 번째 사진을 보면

 

자식 클래스에서 printImg라는 함수를 정의하고 호출하는 하는 것처럼 함수를 추가하는 것도 가능합니다.

 

---

instanceof 연산자

 

instanceof 연산자는 왼쪽에 있는 객체가 오른쪽에 클래스의 인스턴스인가를 확인하여 true, false를 리턴합니다.

 

instanceof 연산자

위 그림의 결과를 보면

 

rectangle 객체는 Rectangle 클래스의 인스턴스이지만 Shape를 상속받았기 때문에 Shape의 인스턴스로도 인식이 됩니다.

 

그리고 triangle도 마찬가지로 인스턴스로 인식되어 true값을 출력하게 됩니다.

 

triangle 객체는 Rectangle 클래스로 인해 생성된 객체가 아니기 때문에 false를 출력하게 됩니다.

 

 

결론,

 

instanceof 연산자는 해당 객체가 어떤 클래스와 연관이 있는지 확인시켜주는 연산자입니다.