JavaScript에서 부모 클래스와 자식 클래스에 같은 이름의 메서드를 정의할 수 있나요?

네, JavaScript에서는 부모 클래스와 자식 클래스에 같은 이름의 메서드를 정의할 수 있습니다.

이 경우 자식 클래스의 메서드가 부모 클래스의 메서드를 오버라이드(재정의)합니다. 따라서 자식 클래스의 인스턴스에서 해당 메서드를 호출하면 자식 클래스의 메서드가 실행되고, 부모 클래스의 인스턴스에서 호출하면 부모 클래스의 메서드가 그대로 실행됩니다. 이는 프로토타입 체인에서 가장 가까운 곳에 정의된 메서드가 우선적으로 호출되기 때문입니다.

예제

class Parent {
    constructor(parentValue) {
        this.parentValue = parentValue;
    }
    // 자식 클래스와 같은 이름의 부모 클래스 메서드
    showValues() {
        console.log("The parent method is called.....");
        console.log("the value is=" + this.parentValue);
    }
}
class Child extends Parent {
    constructor(parentValue, childValue) {
        super(parentValue);
        this.childValue = childValue;
    }
    // 부모 클래스와 같은 이름의 자식 클래스 메서드
    showValues() {
        console.log("The child method is called.....");
        console.log("The value is=" + `${this.childValue}`);
    }
}
var parentObject = new Parent(100);
parentObject.showValues();
var childObject = new Child(400, 500);
childObject.showValues();

위 프로그램을 실행하려면 다음 명령어를 사용합니다 −

node fileName.js

여기서는 파일 이름이 demo195.js라고 가정하겠습니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −

PS C:\Users\Amit\javascript-code> node demo195.js
The parent method is called.....
the value is=100
The child method is called.....
The value is=500

동작 원리 정리

실행 결과를 보면 parentObject.showValues()를 호출했을 때는 부모 클래스의 메서드가, childObject.showValues()를 호출했을 때는 자식 클래스의 메서드가 실행된 것을 확인할 수 있습니다.

즉, 같은 이름의 메서드가 존재하더라도 각 객체는 자신이 속한 클래스(또는 프로토타입 체인상 가장 가까운 위치)에 정의된 메서드를 우선적으로 사용합니다. 만약 자식 클래스에서 부모 클래스의 원래 메서드를 함께 호출하고 싶다면 super.showValues()처럼 super 키워드를 활용하면 됩니다.