소개
자바스크립트는 프로토타입 기반의 언어로, 전통적인 클래스 기반의 상속 방식보다는 프로토타입을 이용한 상속을 사용합니다. 이번 블로그 포스트에서는 자바스크립트에서 생성자와 프로토타입을 이용한 상속 관련 디자인 패턴에 대해 알아보겠습니다.
생성자 함수(Constructor Functions)
생성자 함수는 자바스크립트에서 객체를 생성하기 위해 사용되는 함수입니다. 생성자 함수를 통해 생성된 객체들은 동일한 프로퍼티와 메서드를 가지게 됩니다. 예를 들어, 다음은 Animal이라는 생성자 함수를 정의하는 예시입니다.
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log("My name is " + this.name);
}
위 코드에서 Animal 생성자 함수는 name 프로퍼티를 가지는 객체를 생성하는 역할을 합니다. sayName 메서드는 Animal 프로토타입에 추가된 함수입니다.
프로토타입 기반 상속
프로토타입은 자바스크립트에서 객체 간 상속을 구현하는 데 사용되는 메커니즘입니다. 생성자 함수의 프로토타입 프로퍼티를 통해 상속 관계를 만들 수 있습니다.
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log("Woof!");
}
위 코드에서 Dog 생성자 함수는 Animal 생성자 함수를 호출하여 상위 클래스의 프로퍼티를 설정합니다. 그리고 Dog 객체의 프로토타입을 Animal.prototype의 인스턴스로 설정하여 상속 관계를 생성합니다.
상속된 메서드 호출
프로토타입을 이용한 상속은 상위 클래스의 메서드를 하위 클래스에서 호출할 수 있는 장점이 있습니다. 예를 들어, Dog 객체에서 sayName 메서드를 호출할 수 있습니다.
const myDog = new Dog("Max", "Golden Retriever");
myDog.sayName(); // My name is Max
정리
자바스크립트에서 생성자 함수와 프로토타입을 이용한 상속 관련 디자인 패턴을 알아보았습니다. 생성자 함수를 통해 객체를 생성하고, 프로토타입을 이용해 상속 관계를 설정할 수 있습니다. 상속된 메서드를 호출하여 효율적인 상속 구조를 만들 수 있습니다.