프로토타입(Prototype)이 뭐지?
앞서 포스팅했던 생성자 함수에서, 생성자 함수 안에 정의한 메서드는 인스턴스를 만들 때마다 계속해서 생성되기 때문에 메모리 사용량이나 유지보수 측면에서 단점이 있다고 살펴보았었다. 이를 해결하는 방법으로 프로토타입(Prototype)을 소개하려 한다.
Prototype을 우리말로 하면 '원형'으로 번역할 수 있으나, 그 특징을 살펴보면 '유전자'에 가깝다. 부모의 유전자가 자식에게 대물림이 되듯이, 자바스크립트에서 객체도 프로퍼티나 메서드를 상속한다. Prototype은 자바스크립트에서만 있는 상속을 구현하는 방법이다.
앞선 생성자 함수 포스팅에서 아래와 같은 코드를 작성했었다.
function Sandwich(name, bread, cheese, sauce){
this.name = name;
this.bread = bread;
this.cheese = cheese;
this.sauce = sauce;
this.sayMenu = function(){
console.log(`주문하신 ${this.name} 샌드위치 나왔습니다!`)
}
}위의 코드에서 sayMenu라는 메서드를 Prototype으로 지정하면 다음과 같다.
function Sandwich(name, bread, cheese, sauce){
this.name = name;
this.bread = bread;
this.cheese = cheese;
this.sauce = sauce;
}
// 프로토타입으로 sayMenu 메서드를 지정한다.
Sandwich.prototype.sayMenu = function(){
return console.log(`주문하신 ${this.name} 샌드위치 나왔습니다!`)
}
const order1 = new Sandwich('에그마요', '허니오트', '아메리칸', '스위트 어니언');그리고 order1이라는 이름으로 인스턴스를 만들어 출력을 해보면 아래와 같다. order1을 출력해보면 객체 안에 sayMenu가 없는 것 같지만, sayMenu는 [[Prototype]] 내부슬롯에 들어가 있다. 그리고 얼마든지 호출해서 사용할 수 있다. 이렇게 상속을 이용하면 코드의 재사용에 매우 유용하다. 이때 prototype은 함수에만 생성된다는 것을 주의하자.
__proto__
모든 객체는 __proto__ 접근자 프로퍼티를 통해서 자신의 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. 즉, 상속받은 prototype을 확인하고 싶을 때 사용하면 된다. 위의 order1을 __proto__를 이용하면 콘솔창에서 그 내용을 확인 할 수 있다.
__proto__를 직접 등록해서 object끼리 상속하도록 만들 수도 있다.
const parent = { familyName : 'Moon'};
const child = {};
child.__proto__ = parent;
console.log(child.familyName); // Moon 이 출력된다.프로토타입 체이닝
자바스크립트에서 객체에 접근하고자 하는 프로퍼티가 없다면, 그 부모의 프로토타입의 프로터디를 순차적으로 검색한다. 쉽게 정리하면 아래와 같은 순서로 진행된다.
- 그 객체가 해당 프로퍼티를 직접 가지고 있는가?
- 없다면, 부모의 프로토타입에 해당 프로퍼티가 있는가?
- 없다면, 그 부모의 부모의 프로토타입에 해당 프로퍼티가 있는가?
... (무한반복)
이러한 방식을 프로타입 체이닝이라고 부른다.
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
const man = new Person('철수', 20, '남')
console.log(man); // {name: '철수', age: 20, gender: '남'}
man.hasOwnProperty(name) // trueman.hasOwnProperty('name')를 호출하면 먼저 man 객체에서 hasOwnProperty를 검색한다. man에는 해당 메서드가 없으므로 그 상위인 Person으로 올라간다. Person에도 없는 메서드인데 hasOwnProperty를 쓸 수 있는 이유는 뭘까? hasOwnProperty는 Object.prototype의 메서드이기 때문이다. 즉, 가장 최상위의 Object.prototype의 메서드는 상속에 의해 man에서도 사용할 수 있는 것이다.
앞서 언급했듯이 Prototype은 자바스크립트에서만 사용하는 특이한 문법이다. 다른 언어에서 사용하는 보편적인 객체 지향의 코드와 차이가 있다. 다른 언어들에 비해 자바스크립은 매우 늦게 2015년이 되어서야 비로소 Class를 사용하여 보편적인 객체 지향의 코드로 사용할 수 있게 되었다. Class에 대해서는 다음 포스팅에서 다루어보도록 하겠다.
