Class. 상속과 다양성

1. width, height, color 라는 속성과 draw(), getArea() 라는 매소드를 가진 Shape 클래스 선언

 

2. class Rectangle extends Shape{} 을 통해 Shape 클래스를 상속받은 Rectangle 클래스 선언

    class Triangle extends Shape{} 을 통해 Shape 클래스를 상속받은 Triangle 클래스 선언

 

3. Rectangle 클래스를 통한 인스턴스 생성, 너비20, 높이20, 색깔 파란색 을 가진 rectangle 오브젝트 

    Triangle 클래스를 통한 인스턴스 생성, 너비20, 높이20, 색깔 빨간색 을 가진 triangle 오브젝트

 

4. 비슷한 도형이니까, Shape 클래스를 상속하면 나머지는 다 비슷한데 너비를 구하는 공식이 다름. 사각형은 w * h 지만

삼각형은 (w*h)/2니까 getArea() 코드가 달라져야겠네? 이럴때 다양성이 필요하다..

5. Shape 클래스를 상속받아 Triangle 클래스 만들때 필요한 함수만 재정의(overwriting) / 이렇게 해주면 console.log(triangle.getArea()); 가 200으로 바뀜 ^^

6. 만약 draw() 함수를 재정의 하면 저 Shape 클래스에서 선언했던 console.log(`drawing ${this.color} color of`)가 덮어씌워짐. 뭍혀버려... 근데 나는 Shape 클래스에서 선언했던것도 필요하고 , 호박도 필요해. 이런상황에는 super.draw() 를 통해 가져올 수 있다.

7. 위 사진처럼 재정의(overwhiting)을 통해

super.draw() -> drawing red color of

console.log('호박') - > 호박

getArea(){return (this.width * this.height)/2} -> 200

이 출력되는 것을 확인!

 

이것이 상속과 다양성.