프로토타입 객체
Javascript에서 기본 데이터 타입인 bolean, number, string 그리고 특별한 값인 null, undefined를 제외하고는 모두 객체이며 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만듭니다. 프로토타입 객체는 객체의 부모 격인 객체입니다.
function Person(){}
var joon = new Person();
var jisoo = new Person();
Person.prototype.getType = function(){
return "인간";
};
console.log(joon.getType()); // 인간
console.log(jisoo.getType()); // 인간위의 코드는 prototype 속성을 이용하여 멤버를 추가하였습니다. 프로토타입 객체에 getType()라는 함수를 추가하면 멤버를 추가하기 전에 생성된 객체에서도 추가된 멤버를 사용할 수 있습니다. 같은 프로토타입을 이용하여 생성된 joon과 jisoo 객체는 getType()을 사용할 수 있습니다
프로토타입 객체에 멤버를 추가, 수정, 삭제할 때는 함수 안의 prototype 속성을 사용해야 합니다. 하지만 프로토타입 멤버를 읽을 때는 함수안의 prototype 속성 또는 객체 이름으로 접근합니다.
joon.getType = function() {
return "사람";
};
console.log(joon.getType()); // 사람
console.log(jisoo.getType()); // 인간
jisoo.age = 25;
console.log(joon.age) // undefined;
console.log(jisoo.age) // 25위의 코드는 joon 객체를 이용하여 getType() 리턴 값을 사람으로 수정하였습니다. 그리고 joon과 jisoo 각각 getType()를 호출하면 joon 객체를 이용하여 호출한 결과는 사람으로 출력되고 jisoo로 호출한 결과는 인간이 출력됩니다. 생성된 객체를 이용하여 프로토타입 객체의 멤버를 수정하면 프로토타입 객체에 있는 멤버를 수정하는 것이 아닌 자신의 객체에 멤버를 추가하는 것입니다. joon 객체를 사용하여 getType()을 호출하면 프로토타입 객체의 getType()를 호출한 것이 아닌 joon 객체에 추가된 getType()을 호출한 것입니다. 프로토타입 객체의 멤버를 수정할 경우는 멤버 추가와 같이 함수의 prototype 속성을 이용하여 수정합니다.
Person.prototype.getType = function(){
return "사람";
}
console.log(jisoo.getType()); // 사람위의 코드를 보게 되면 prototype 속성을 이용하여 getType() 리턴 값을 사람으로 수정합니다.
그리고 jisoo 객체를 이용하여 호출한 결과 사람이 나옵니다.
결론을 내리면, 프로토타입 객체는 새로운 객체가 생성되기 위한 원형이 되는 객체입니다.
같은 원형으로 생성된 객체가 공통으로 참조하는 공간입니다.
프로토타입 객체의 멤버를 읽는 경우에는 객체 또는 함수의 prototype 속성을 통해 접근할 수 있습니다. 하지만 추가, 수정, 삭제는 함수의 prototype 속성을 통해 접근해야 합니다.
[[Prototype]] vs prototype 프로퍼티
모든 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯(internal slot)을 갖고 있으며 상속을 위해 사용됩니다.
함두소 객체이므로 [[Prototype]] 인터널 슬롯을 갖습니다. 그런데 함수 객체는 일반 객체와 달리 prototype 프로퍼티도 소유합니다.
porototype 프로퍼티는 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯은 다릅니다. prototype 프로퍼티와 [[Prototype]]은 모두 프로토타입 객체를 가리키지만 관점의 차이가 있습니다
function Person(name){
this.name = name;
}
var foo = new Person('Lee');
console.dir(person); // prototype 프로퍼티가 있다.
console.dir(foo); // prototype 프로퍼티가 없다.- [[Prototype]]
- 함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯입니다.
- 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우
Function.prototype를 가리킵니다.
console.log(Person.__proto__ === Function.prototype);- prototype 프로퍼티
- 함수 객체만 가지고 있는 프로퍼티입니다.
- 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킵니다.
console.log(Person.prototype === foo.__proto__);