Prototype이란?
자바스크립트를 사용하는 사람 모두 들어봤을 것이다. Prototype.
설명해보라고 하면 조금 애매해지기에 명확히 짚어보고 넘어가자.
자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다. 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다.
const woody = {
riding:true
}
woody.riding // true- 'woody.riding' 처럼 객체 프로퍼티를 참조할 경우 [[Get]]이 호출되어 객체 내부에 해당 프로퍼티가 존재하는지 탐색한다. 그렇다면 객체 내부에 없는 프로퍼티를 호출하게 되면 어떻게 될까??
- [[Get]]은 객체 내부에서 해당 프로퍼티를 찾지 못하면 바로 [[Prototype]]링크를 따라가 프로퍼티를 탐색한다. 모든 일반 객체의 최상위 프로토타입 연쇄는 내장 Object.prototype이고 이 지점에서도 찾지 못하면 탐색이 종료된다. (undefined 반환)
const buzz = {
flying:true
}
const woody = Object.create(buzz);
// 우디가 날 수 있게 되었다!
woody.flying; // true- woody는 buzz와 [[Prototype]]이 링크되었다. woody내부에는 flying이라는 프로퍼티가 없지만 연결된 buzz에서 해당 프로퍼티를 찾아 그 값을 반환한 것이다.
그렇다면 객체를 객체와 연결해야 하는 이유는 뭘까? 그렇게 함으로써 어떤 장점이 있는걸까?
// this를 사용
function Toy(name){
this.name = name;
this.battery = 100;
this.charge = function(){
battery += 10;
console.log(`charging is finished. battery is ${this.battery}`)
}
}
const woody = new Toy('woody');
const buzz = new Toy('buzz');// prototype 사용
function Toy(name){
this.name = name;
this.battery = 100;
}
Toy.prototype.charge = function(){
this.battery += 10;
console.log(`charging is finished. battery is ${this.battery}`)
}
const woody = new Toy('woody');
const buzz = new Toy('buzz');- prototype은 모든 객체가 공유하고 있어서 한 번만 만들어지지만, this에 넣은 것은 객체 하나를 만들 때마다 메소드도 하나씩 만들어지기 때문에 불필요한 메모리 낭비가 발생한다.
정리
객체에 존재하지 않는 프로퍼티를 접근하려 시도하면 해당 객체의 내부 [[Prototype]] 링크를 따라 다음 수색 장소를 결정한다. 모든 일반 객체의 최상위 프로토타입 연쇄는 내장 Object.prototype이고 이 지점에서도 찾지 못하면 탐색이 종료된다.
두 객체를 서로 연결짓는 가장 일반적인 방법은 함수 호출 시 new키워드를 앞에 붙이는 것이다. new키워드는 일반 함수 호출 + "객체" 생성이라는 잔업을 더 부과하는 지시자이다. const f = new Foo()를 실행하면 Foo 함수가 실행되고, 객체가 생성되어 변수 f 에 할당된다.
typeof f // object
typeof Foo //function- constructor는 내가 선언한 생성자 함수(Foo)를 가리킨다.
new 키워드와 함께 함수를 호출할 경우 constructor함수를 실행하고 부수효과로 객체가 생성된다. 생성자 함수가 아니라 함수를 생성하는 호출이라고 생각하는것이 맞다 - prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.
- proto는 [[Prototype]]링크이다. 생성자 함수에 정의해두었던 prototype을 참조한다.
Junior Front-End Developer