JAVASCRIPT) 프로토타입 이해와 활용
자바스크립트 프로토타입: 이해와 활용
자바스크립트는 객체 지향 프로그래밍 언어로, 그 핵심에는 프로토타입 기반의 상속 구조가 있습니다. 프로토타입을 이해하면 자바스크립트의 객체 생성과 상속 방식을 더 깊이 있게 이해할 수 있습니다. 이번 블로그 글에서는 자바스크립트의 프로토타입 개념과 그 활용 방법을 예시와 함께 살펴보겠습니다.
프로토타입이란?
프로토타입은 자바스크립트에서 객체의 상속을 구현하는 기본 메커니즘입니다. 모든 자바스크립트 객체는 [[Prototype]]이라는 숨겨진 프로퍼티를 가지고 있으며, 이는 다른 객체를 참조합니다. 이 참조하는 객체를 프로토타입 객체라고 합니다. 프로토타입을 통해 객체는 다른 객체의 프로퍼티와 메서드를 상속받을 수 있습니다.
프로토타입 체인
자바스크립트에서는 객체가 다른 객체의 프로퍼티나 메서드를 찾을 때, 프로토타입 체인을 따라 탐색합니다. 특정 객체에 원하는 프로퍼티가 없으면, 그 객체의 프로토타입을 따라가며 프로퍼티를 찾습니다. 이 과정을 반복하여 최상위 객체인 Object.prototype에 도달할 때까지 탐색합니다.
객체 생성과 프로토타입
자바스크립트에서 객체를 생성하는 방법에는 여러 가지가 있지만, 가장 일반적인 방법은 생성자 함수를 사용하는 것입니다. 생성자 함수는 새로운 객체를 생성하고, 이 객체의 프로토타입을 설정합니다.
생성자 함수와 프로토타입
다음은 생성자 함수와 프로토타입을 사용하는 예시입니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
let person1 = new Person('Alice', 30);
let person2 = new Person('Bob', 25);
person1.sayHello(); // 출력: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 출력: Hello, my name is Bob and I am 25 years old.
위 예제에서 Person 생성자 함수는 새로운 객체를 생성하며, 이 객체는 Person.prototype을 프로토타입으로 가집니다. Person.prototype에 정의된 sayHello 메서드는 모든 Person 인스턴스에서 사용할 수 있습니다.
프로토타입 상속
자바스크립트의 프로토타입 상속을 통해 객체 간에 프로퍼티와 메서드를 공유할 수 있습니다. 이를 통해 코드 재사용성을 높이고, 메모리 사용을 줄일 수 있습니다.
프로토타입 상속 예시
다음은 프로토타입 상속을 사용하는 예시입니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name, breed) {
Animal.call(this, name); // 부모 생성자 호출
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
console.log(`${this.name} barks.`);
};
let dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 출력: Rex barks.
이 예제에서 Dog 생성자 함수는 Animal 생성자 함수를 호출하여 name 프로퍼티를 상속받습니다. Dog.prototype을 Animal.prototype의 새로운 인스턴스로 설정하여 프로토타입 체인을 연결합니다. 그 후, Dog의 프로토타입에 speak 메서드를 정의하여 Animal의 speak 메서드를 재정의합니다.
프로토타입의 활용
프로토타입은 다양한 방식으로 활용될 수 있습니다. 자주 사용되는 패턴 중 일부를 살펴보겠습니다.
프로토타입을 통한 메서드 공유
프로토타입을 통해 메서드를 공유하면 메모리를 절약할 수 있습니다. 각 인스턴스가 개별적으로 메서드를 가지는 대신, 프로토타입 체인을 통해 공통 메서드를 공유합니다.
객체의 동적 확장
프로토타입을 사용하면 객체를 동적으로 확장할 수 있습니다. 예를 들어, 런타임 시 새로운 메서드를 추가할 수 있습니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Car(model) {
this.model = model;
}
Car.prototype.drive = function() {
console.log(`${this.model} is driving.`);
};
let car = new Car('Tesla Model 3');
car.drive(); // 출력: Tesla Model 3 is driving.
Car.prototype.stop = function() {
console.log(`${this.model} has stopped.`);
};
car.stop(); // 출력: Tesla Model 3 has stopped.
이 예제에서 Car 객체는 처음에는 drive 메서드만 가졌지만, 나중에 stop 메서드를 추가하여 사용할 수 있게 되었습니다.
결론
자바스크립트의 프로토타입은 객체지향 프로그래밍의 핵심 개념으로, 상속과 코드 재사용을 효율적으로 관리할 수 있게 해줍니다. 프로토타입 체인과 생성자 함수의 활용 방법을 이해하면, 자바스크립트의 객체 생성과 상속 방식을 더욱 효과적으로 사용할 수 있습니다. 프로토타입을 잘 활용하여 코드의 유지보수성과 확장성을 높여보세요!