생성자 함수를 활용한 상속 패턴과 프로토타입 기반 상속 패턴의 비교

02 Oct 2023

javascript

도입

객체 지향 프로그래밍에서 상속은 코드 재사용과 구조화에 매우 중요한 개념입니다. 자바스크립트에서는 생성자 함수를 활용한 상속 패턴과 프로토타입 기반 상속 패턴 두 가지 방식을 주로 사용합니다. 이번 글에서는 이 두 가지 방식의 장단점과 차이점을 알아보고자 합니다.

생성자 함수를 활용한 상속 패턴

생성자 함수를 활용한 상속 패턴은 클래스 기반 언어에서 사용되는 상속 방식과 유사합니다. 부모 클래스의 생성자 함수를 자식 클래스의 생성자 함수 내에서 호출하여 상속하는 방식입니다.

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

function Child(name, age) {
  Parent.call(this, name); // 부모 클래스의 생성자 호출
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype); // 부모 클래스의 프로토타입 객체를 자식 클래스의 프로토타입으로 설정
Child.prototype.constructor = Child; // 자식 클래스의 constructor를 자식 클래스로 재설정

var child = new Child("John", 10);
console.log(child.name); // 출력: John
console.log(child.age); // 출력: 10

생성자 함수를 활용한 상속 패턴은 가독성이 좋고, 부모 클래스의 메소드를 쉽게 재사용할 수 있는 장점이 있습니다. 하지만 상속 체인이 깊어지는 경우, 프로토타입 체인의 구조가 복잡해질 수 있습니다.

프로토타입 기반 상속 패턴

프로토타입 기반 상속 패턴은 객체의 프로토타입을 직접 상속하는 방식입니다. 부모 객체의 프로토타입을 자식 객체의 프로토타입으로 설정하여 상속합니다.

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

Parent.prototype.getName = function() {
  return this.name;
}

function Child(name, age) {
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype); // 부모 객체의 프로토타입을 자식 객체의 프로토타입으로 설정
Child.prototype.constructor = Child; // 자식 객체의 constructor를 자식 객체로 재설정

var child = new Child("John", 10);
console.log(child.getName()); // 출력: John
console.log(child.age); // 출력: 10

프로토타입 기반 상속 패턴은 생성자 함수를 호출하는 것이 아니기 때문에, 메모리 사용량과 성능 면에서 생성자 함수를 활용한 상속 패턴보다 효율적입니다. 또한, 상속 체인이 깊어져도 프로토타입 체인의 구조가 단순해 유지됩니다. 하지만, 부모 객체의 메소드를 직접 호출하는 것이 아니기 때문에 가독성이 좀 떨어지는 단점이 있습니다.

결론

생성자 함수를 활용한 상속 패턴과 프로토타입 기반 상속 패턴은 각각 장단점을 가지고 있습니다. 사용하는 문맥과 용도에 따라 적합한 상속 방식을 선택해야 합니다. #JavaScript #상속