1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Chart {
constructor(width, height){
this.width = width;
this.height = height;
}
drawLine(){
console.log('draw line')
}
}
class barChart extends Chart{
constructor(width, height){
super(width, height)
}
draw(){
this.drawLine()
console.log(`draw ${this.width} X ${this.height} barChart`)
}
}
const barChart1 = new barChart(100, 100)
barChart1.draw();
1 ~ 10 코드 설명
차트 클래스를 정의 합니다. drawLine 메소드를 통해 라인을 그립니다.
11 ~ 14 코드 설명
차트클래스를 상속하는 바차트 클래스를 정의합니다. 클래스의 상속은 extends 키워드를 사용합니다. 상속을 하게 되면 생성자 함수에서 상속한 부모 클래스의 생성자를 호출해야 하는데 이때 super()키워드를 사용합니다. 즉 super가 부모 생성자를 가리킵니다.
16 ~ 19 코드 설명
상속을 했기 때문에 부모 클래스의 정의된 메소드를 사용할 수 있습니다.
22 ~ 23 코드 설명
바차트 클래스의 인스턴스를 만들고 draw 메소드를 호출합니다. 부모 클래스인 차트 클래스의 생성자 함수가 호출되어 width, height 속성에 주어진 값이 할당되며 부모클래스에 정의된 drawLine 메소드가 호출이 되어집니다.