[JavaScript] 상속과 오버라이드(오버라이딩)

상속

상속의 필요성을 이해해 보자.

사각형 클래스와 정사각형 클래스를 먼저 만들어 본다.

 

사각형 클래스

class Rectangle {
    constructor(width, height) {
        this.width = width
        this.height = height
    }
    
    // 둘레 계산
    getPerimeter() {
        return 2 * (this.width + this.height)
    }
    
    // 넓이 계산
    getArea() {
        return width * height
    }
}

 

정사각형 클래스

class Square {
    constructor(length) {
        this.length = length
    }
    
    // 둘레 계산
    getPerimeter() {
        return 4 * this.length
    }
    
    // 넓이 계산
    getArea() {
        return this.length * this.length
    }
}

 

보면 정사각형이나 사각형이나 둘레나 넓이를 구하는 방법이 비슷하다.

정사각형의 한쪽 길이를 가지고 사각형 클래스에 width와 height를 쓰면 동일하지 않는가?

그래서 중복을 작성하지 않고 공통된 기능을 상속시킬 수 있는 방법이 있다.

 

정사각형 클래스에 사각형 클래스를 상속받아 구현하여

동일한 기능을 갖게 만들 수 있다.

 

상속 형태

class 클래스이름 extends 부모클래스이름 {
   ...
}

 

 

사각형을 상속받은 정사각형 클래스

class Square extends Rectangle {
    constructor(length) {
        super(length, length)
    }
}

const square = new Square(2)

super()는 부모의 생성자를 호출하는 메소드이다.

중복되는 함수와 속성들을 상속을 통해 최소화할 수 있다.

 

오버라이딩(오버라이드)

부모에게 상속받은 함수를 다시 자식이 선언하여 덮어쓰는 것을 오버라이딩이라고 한다.

오버로딩과 헷갈릴 수 있는데

오버로딩은 메소드 이름은 같으나 매개변수의 개수나 타입이 다르게 하여 선언한 것이다.

 

오버라이딩

class Parent {
    call() {
        console.log('Parent Call')
    }
}

class Child {
    call() {
        console.log('Child Call')
    }
}

 

아래의 실행 결과는 어떻게 될까?

new Child().call()

 

메소드가 오버라이딩이 되어 Child의 call이 실행된다.

 

부모 메소드 호출 방법

class Child {
    call() {
        super.call()
    }
}

super.메소드() 형태로 부모의 메소드를 호출한다.

 

toString 메소드

어떤 객체를 문자열로 반환하는 메소드이다. 이 메소드는 모든 객체는 가지는 메소드이다.

모든 객체는 Object라는 가장 최상위 클래스를 갖는데 이곳에 toString 메소드가 있다.

 

예제 코드

class People {
    constructor(){
        this.name='홍길동'
        this.age=20
    }
    
    toString() {
        return `이름:${this.name} 나이:${this.age}`
    }
}

console.log(new People())

객체를 그냥 출력하면 자동으로 toString 메소드의 결과를 출력한다.

이것은 우리가 toString 메소드를 오버라이딩 했기 때문이다.