프로토타입은 JavaScript에서 객체지향 프로그래밍을 실현하기 위한 핵심 개념입니다. 프로토타입을 활용하여 객체 간에 속성과 메서드를 공유할 수 있습니다. 이번 글에서는 프로토타입의 고급 기능을 활용하는 방법에 대해 알아보겠습니다.
1. 프로토타입 체인
프로토타입 체인은 JavaScript에서 객체간의 상속을 구현하는 메커니즘입니다. 객체는 자신의 프로토타입으로부터 속성과 메서드를 상속받을 수 있으며, 이 프로토타입은 또 다른 프로토타입을 가지고 있을 수 있습니다. 이렇게 연결된 프로토타입들의 체인이 형성되어 객체 간의 상속이 이루어집니다.
프로토타입 체인을 활용하면 간단한 상속 관계를 구현할 수 있습니다. 예를 들어, Shape이라는 부모 객체를 정의하고 이를 상속받아 Rectangle과 Circle이라는 자식 객체를 만들 수 있습니다. 자식 객체는 부모 객체의 속성과 메서드를 상속받게 되며, 필요한 경우 재정의하여 사용할 수도 있습니다.
function Shape() {
this.name = "Shape";
}
Shape.prototype.getName = function() {
return this.name;
}
function Rectangle() {
this.name = "Rectangle";
}
Rectangle.prototype = Object.create(Shape.prototype);
function Circle() {
this.name = "Circle";
}
Circle.prototype = Object.create(Shape.prototype);
let rect = new Rectangle();
console.log(rect.getName()); // Output: "Rectangle"
let circle = new Circle();
console.log(circle.getName()); // Output: "Circle"
2. 동적 프로토타입 생성
동적 프로토타입 생성은 객체의 생성자 함수 내에서 프로토타입을 동적으로 정의하는 방식입니다. 이를 통해 생성자 함수 자체가 프로토타입을 정의하고 객체를 생성할 수 있습니다. 이는 객체 생성 시점에 프로토타입을 정의할 필요 없이 필요한 속성과 메서드를 동적으로 추가할 수 있는 장점이 있습니다.
예를 들어, Person이라는 생성자 함수를 정의하고 greet 메서드를 동적으로 추가해보겠습니다.
function Person(name) {
this.name = name;
if (typeof this.greet !== "function") {
Person.prototype.greet = function() {
return "Hello, " + this.name + "!";
}
}
}
let john = new Person("John");
console.log(john.greet()); // Output: "Hello, John!"
위 예제에서는 객체 생성 시점에 greet 메서드가 이미 존재하는지 확인한 후, 존재하지 않을 경우 Person.prototype에 greet 메서드를 동적으로 추가하였습니다.
결론
프로토타입의 고급 기능을 활용하면 JavaScript에서 객체지향 프로그래밍을 보다 유연하게 구현할 수 있습니다. 프로토타입 체인을 통해 객체의 상속 관계를 구현하고, 동적 프로토타입 생성을 통해 객체의 속성과 메서드를 동적으로 추가할 수 있습니다. 이러한 기능을 적절히 활용하여 효율적이고 유지보수가 용이한 코드를 작성할 수 있습니다.
References: