자바스크립트는 프로토타입 기반의 언어로, 상속을 위해 생성자와 프로토타입을 활용합니다. 이 글에서는 자바스크립트에서 생성자와 프로토타입을 사용하여 메서드 상속과 오버라이딩을 하는 방법에 대해 알아보겠습니다.

생성자 함수를 사용한 상속

생성자 함수를 사용하여 상속을 구현하는 방법은 간단합니다. 부모 객체의 속성과 메서드를 자식 객체에서 사용할 수 있도록 하기 위해 call() 메서드를 사용합니다.

예시 코드

function Animal(name) {
    this.name = name;
}

Animal.prototype.sayHello = function() {
    console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
}

function Dog(name) {
    Animal.call(this, name);
}

var myDog = new Dog("멍멍이");

myDog.sayHello(); // 출력: 안녕하세요, 제 이름은 멍멍이입니다.

위의 코드에서 Animal 생성자 함수는 name 속성을 가진 객체를 생성합니다. 그리고 sayHello 메서드를 Animal.prototype에 추가합니다.

Dog 생성자 함수는 Animal 생성자 함수를 상속하기 위해 Animal.call(this, name)을 호출하고, 그 아래에서 추가적인 속성과 메서드를 정의할 수 있습니다.

프로토타입을 사용한 상속과 메서드 오버라이딩

프로토타입을 사용하여 상속을 구현하면 메모리 사용량을 줄이고 성능을 향상시킬 수 있습니다. 또한, 메서드 오버라이딩을 통해 부모 객체의 메서드를 자식 객체에서 재정의할 수 있습니다.

예시 코드

function Animal(name) {
    this.name = name;
}

Animal.prototype.sayHello = function() {
    console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
}

function Dog(name) {
    this.name = name;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayHello = function() {
    console.log("멍멍!");
}

var myDog = new Dog("멍멍이");

myDog.sayHello(); // 출력: 멍멍!

위의 코드에서 Dog 생성자 함수는 Animal 생성자 함수의 프로토타입을 상속받기 위해 Object.create(Animal.prototype)을 사용합니다. 그리고 Dog.prototype.constructor를 Dog로 설정하여 자식 객체를 가리키도록 합니다.

마지막으로, sayHello 메서드를 오버라이딩하여 “멍멍!”이라는 메시지를 출력하도록 재정의합니다.

마무리

자바스크립트에서 생성자와 프로토타입을 사용하여 메서드 상속과 오버라이딩을 구현하는 방법을 알아보았습니다. 생성자 함수를 사용한 상속은 간단하지만, 프로토타입을 사용한 상속은 메모리 사용량과 성능 면에서 더 효율적입니다. 적절한 상황에 맞게 사용하는 것이 중요합니다.

#JavaScript #상속 #메서드 #오버라이딩