프로토타입 오브젝트 생성하기
클래스를 만들고 그 클래스에서 새로운 인스턴스 객체를 여러 개 만들어 내듯 자바스크립트에서도 객체의 원형을 정의한 후 그 원형에서 새로운 인스턴스 객체를 만들어 낼 수 있습니다.
Person 프로토타입 객체는 데이터를 넣어 두려는 목적 보다는 하나의 틀로 사용하기 위해 만듭니다. 붕어빵 틀에서 실제 붕어빵을 만들어 내듯이 실제 사람을 여러 명 찍어 내기 위한 틀을 프로토타입으로 만든다고 생각하면 이해하기 쉽습니다. 해당 Person 프로토타입에는 사람의 이름을 담는 name 속성과 나이를 담는 age 속성이 들어갈 수 있습니다. 그리고 walk 함수를 넣어서 걸어가는 동작을 수행할 수도 있습니다.
Person Prototype 코드 예제
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.walk = function(speed){
console.log(speed + 'km 속도로 걸어갑니다.');
}
var person1 = new Person('소녀시대', 20);
var person2 = new Person('걸스데이', 22);
console.log(person1.name + '객체의 walk(10)을 호출합니다.')person1.walk(10)
> 소녀시대 객체의 walk(10)을 호출합니다. > 10km의 속도로 걸어갑니다.
walk() 함수를 속성으로 추가한 것이 아닌 Person.prototype.walk = function(){...} 형태로 만든 이유는 Person 객체가 실제 데이터를 담기 위해 만들어진 것이 아니라 다른 인스턴스 객체를 만들기 위한 원형 틀로 만들어졌기 때문입니다. Person 객체 안에 있는 Prototype 속성에 데이터나 함수를 속성으로 추가하면 실제 인스턴스 객체를 만들 때 메모리를 효율적으로 관리할 수 있습니다.
Person 객체 안에 있는 Prototype 속성도 객체로 만든 것인데, Person 함수가 만들어질 때 자동으로 만들어집니다. 이 Prototype 객체는 Person 객체 자신을 가리키도록 되어 있어 다음의 두 코드는 같은 결과를 보여줍니다.
Person.walk = function(speed){
console.log(speed + 'km 속도로 걸어갑니다.');
}
Person.prototype.walk = function(speed){
console.log(speed + 'km 속도로 걸어갑니다.');
}
위의 두 가지 코드 모두 Person이라는 틀로 만들어 낸 인스턴스 객체에서 walk 함수를 호출할 수 있습니다. 하지만, Prototype 속성으로 추가하면 인스턴스 객체를 만들 때 메모리를 효율적으로 관리할 수 있다는 점이 서로 다릅니다.
References
- Do it! Node.js 프로그래밍