자바스크립트 기본 문법 – 객체 – 2 – 생성자 함수와 프로토타입
생성자 함수: 객체를 만드는 특별한 함수
우리는 이미 객체를 만드는 방법 중 하나로 객체 리터럴을 배웠습니다. 하지만 때로는 동일한 속성과 메서드를 가지는 여러 개의 객체를 생성해야 할 때가 있습니다. 이런 경우, 생성자 함수를 사용하여 편리하게 객체를 생성할 수 있습니다.
생성자 함수는 객체를 생성하기 위해 사용되는 특별한 함수입니다. 생성자 함수의 이름은 일반적으로 대문자로 시작하며, new 키워드와 함께 호출됩니다. 생성자 함수를 호출하면 새로운 객체가 생성되고, 생성된 객체는 생성자 함수의 프로토타입을 상속합니다.
다음은 생성자 함수의 예시입니다:
function Person(name, age) {
this.name = name;
this.age = age;
}
var person1 = new Person("홍길동", 20);
var person2 = new Person("이순신", 30);위의 예시에서 Person이라는 생성자 함수가 정의되었습니다. 이 생성자 함수는 name과 age라는 매개변수를 받아 this를 사용하여 객체에 속성을 할당합니다. new Person("홍길동", 20)과 같이 생성자 함수를 호출하면 person1이라는 객체가 생성되고, person1.name은 “홍길동”이 되고, person1.age는 20이 됩니다. 동일한 방식으로 person2 객체도 생성되었습니다.
프로토타입: 객체의 템플릿
프로토타입은 자바스크립트의 핵심 개념 중 하나입니다. 생성자 함수를 사용하여 생성된 객체들은 해당 생성자 함수의 프로토타입을 공유합니다. 프로토타입은 객체의 템플릿으로서, 객체의 공통된 속성과 메서드를 정의하는 역할을 합니다. 객체는 프로토타입의 속성과 메서드에 접근할 수 있습니다.
프로토타입을 사용하여 객체를 생성하면, 메모리를 효율적으로 사용할 수 있고, 객체 간의 공통된 속성과 메서드를 쉽게 관리할 수 있습니다.
다음은 프로토타입을 사용한 예시입니다:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log("안녕하세요! 저는 " + this.name + "입니다.");
};
var person1 = new Person("홍길동", 20);
var person2 = new Person("이순신", 30);
person1.greet(); // 출력: 안녕하세요! 저는 홍길동입니다.
person2.greet(); // 출력: 안녕하세요! 저는 이순신입니다.위의 예시에서 Person.prototype 객체에 greet 메서드를 추가했습니다. 이 메서드는 생성된 객체들이 공유할 수 있습니다. person1과 person2 객체는 greet 메서드를 호출할 수 있고, 각 객체의 name 속성을 출력합니다.
생성자 함수와 프로토타입의 관계
생성자 함수와 프로토타입은 밀접한 관계를 가지고 있습니다. 생성자 함수로 객체를 생성하면, 생성된 객체는 해당 생성자 함수의 프로토타입을 상속합니다. 상속을 통해 객체는 프로토타입의 속성과 메서드를 공유하고 사용할 수 있습니다.
생성자 함수의 프로토타입은 prototype이라는 특수한 속성을 사용하여 정의됩니다. prototype 속성은 생성자 함수 자체의 속성이며, 이를 통해 프로토타입에 접근할 수 있습니다.
생성자 함수와 프로토타입의 관계를 이해하기 위해 다음 예시를 살펴봅시다:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log("안녕하세요! 저는 " + this.name + "입니다.");
};
var person1 = new Person("홍길동", 20);
var person2 = new Person("이순신", 30);
console.log(person1.constructor); // 출력: Person
console.log(person2.constructor); // 출력: Person
console.log(Person.prototype.isPrototypeOf(person1)); // 출력: true
console.log(Person.prototype.isPrototypeOf(person2)); // 출력: true위의 예시에서 constructor는 생성자 함수를 참조하는 속성입니다. person1.constructor와 person2.constructor는 모두 Person 생성자 함수를 참조합니다. 이를 통해 객체가 어떤 생성자 함수에 의해 생성되었는지 알 수 있습니다.
또한, isPrototypeOf 메서드를 사용하여 객체와 프로토타입 간의 관계를 확인할 수 있습니다. Person.prototype.isPrototypeOf(person1)과 Person.prototype.isPrototypeOf(person2)는 모두 true를 반환합니다. 이는 person1과 person2 객체가 Person 생성자 함수의 프로토타입을 상속받고 있다는 것을 의미합니다.
주의해야 할 점
- 생성자 함수 이름은 대문자로 시작합니다. 이는 생성자 함수임을 명확히 하기 위한 규칙입니다.
- 생성자 함수 내에서 객체의 속성을 할당할 때
this키워드를 사용해야 합니다.this는 생성된 객체를 가리킵니다. - 프로토타입에 메서드를 추가할 때에는
Person.prototype.methodName = function() { ... }과 같은 형식으로 추가해야 합니다. - 생성자 함수와 프로토타입을 사용하여 객체를 생성할 때에는
new키워드를 사용해야 합니다. - 생성된 객체는 해당 생성자 함수의 프로토타입을 상속하며, 프로토타입의 속성과 메서드를 공유합니다.
- 프로토타입은 생성된 객체들 사이에서 공통된 속성과 메서드를 관리하는 템플릿 역할을 합니다.
생성자 함수와 프로토타입은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 데 중요한 개념입니다. 이를 활용하여 객체를 효율적으로 생성하고 관리할 수 있습니다. 잘 이해하고 익숙해지도록 연습해보세요! 자바스크립트의 다양한 기능과 활용 방법을 탐구하는 재미있는 여정이 될 것입니다.