생성자 함수 상속- inheritance

자바스크립트 - 생성자 함수 상속 기능

이 포스팅에서는 자바스크립트에서 생성자 함수를 이용하여 상속 기능을 어떤 방법으로 구현하는가를 간단한 예제를 보면서 정리해 봅니다.

상속은 다음과 같이 세 가지 기능을 가지고 있습니다.

• 코드의 재사용
• 중복코드 제거
• 확장

위의 기능을 어떻게 구현하는지에 대한 과정을 예제를 통해 알아봅니다.

생성자 함수의 상속 

코드의 재사용과 상속을 하기에 앞서 다음과 같은 코드가 있다가 가정해 봅니다.

javascript

// ConstructorA
function ConstructorA() {
    this.num01 = 1234;
}
ConstructorA.prototype.func01 = function () {
    console.log('this.num01 은  ' + this.num01);
};
ConstructorA.prototype.func02 = function () {
    console.log('func02 는 ConstructorA 에서만 정의한 메소드');
};

// ConstructorB
function ConstructorB() {
    this.num01 = 1234;
}
ConstructorB.prototype.func01 = function () {
    console.log('this.num01 은 ' + this.num01);
};
ConstructorB.prototype.func02 = function () {
    console.log('func02 는 ConstructorB 에서만 정의한 메소드');
};

// 인스턴스 생성
var ConstA = new ConstructorA();
// 프로퍼티와 메서드 접근
ConstA.func01(); // this.num01 = 1234
ConstA.func02(); // func02 는 ConstructorA 에서만 정의한 메소드

// 인스턴스 생성
var ConstB = new ConstructorB();
// 프로퍼티와 메서드 접근
ConstB.func01(); // this.num01 = 1234
ConstB.func02(); // func02 는 ConstructorB 에서만 정의한 메소드

위 코드를 살펴보면 중복코드가 발생하고 있는 것을 알 수 있습니다.

이 중복코드를 제거하고 상속하는 것을 다음의 코드를 통해 알아봅니다.

javascript

// 부모로 사용할 생성자 함수를 정의한다(이곳에 중복되는 코드를 담는다)
function ParentConstructor() {
    this.num01 = 10;
}
ParentConstructor.prototype.func01 = function () {
    console.log('this.num01 = ' + this.num01);
};

// firstConstructor
function FirstConstructor() {

}
// 상속
FirstConstructor.prototype = new ParentConstructor();

FirstConstructor.prototype.func02 = function () {
    console.log('func02 는 ConstructorA 에서만 정의한 메소드');
};

// SecondConstructor
function SecondConstructor() {

}
// 상속
SecondConstructor.prototype = new ParentConstructor();

SecondConstructor.prototype.func02 = function () {
    console.log('이 기능은 MyClassB 에 있는 고유 기능입니다');
};


// 인스턴스 생성
var firstConst = new FirstConstructor();

// 프로퍼티와 메서드 접근
firstConst.func01(); // this.num01 = 10
firstConst.func02(); // func02 는 ConstructorA 에서만 정의한 메소드


// 인스턴스 생성
var SecondConst = new SecondConstructor();
// 프로퍼티와 메서드 접근
SecondConst.func01(); // this.num01 = 10
SecondConst.func02(); // func02 는 ConstructorB 에서만 정의한 메소드

중복 코드가 있는 곳을 리팩토링하여 ParentConstructor 와 ParentConstructor.prototype.func01 에 재정의하였고 new ParentConstructor() 객체를 생성하면서 각각의 FirstConstructor, SecondConstructor 생성자 함수의 프로토타입 객체에 할당하였습니다.

위와 같은 패턴으로 중복 발생하는 코드를 제거하면서 상속할 수 있습니다. 

Related links

1. 객체 확장 알아보기

Jaehee's WebClub