__proto__ vs prototype

__proto__는 (이 글)에 정리해두었다. 그런데 prototype은 또 무엇일까?

 

Remember that __proto__ means an object’s prototype.
The prototype property and the new operator are a whole different topic 
- just javascript, dan abramov

 

실은,  __proto__와 prototype은 다른 것이긴 하지만 그렇다면 완전 멀리 있는 것도 아니다.

 

prototype은 객체를 찍어내는 원형이라고 생각하면 된다. 

new Number,() new String(), new Array(), new Function()... 등으로 Object를 생성할 수 있는 것은 이것들의 prototype(원형)이 있기 때문이다. 여기서 잠깐 짚고 넘어가면 좋은 것.

 

* 함수도 객체고 배열도 객체다.

* number 같은 경우 타입은 원시값인데 왜 객체냐? constructor가 왜 필요한데? => String과 같은 원시값들을 감싼 Primitive wrapper objects 임.

 

클래스에서 인스턴스를 찍어내는 것처럼, js에서는 prototype으로 함수, 배열과 같은 Object를 찍어낸다.

 

 

이러한 prototype에는 메서드나 속성 등이 붙을 수 있고, prototype에 의해 생성된 Object는 이러한 메서드나 속성을 가진다. 

Array.prototype에 있는 map, filter 등과 같은 속성들은 Array prototype에 정의되어 있기 때문이다.

// Array.prototype.map 사용
[1, 2, 3].map(el => el + 1)

 

이렇게 생성된 object들에게 __proto__는 prototype을 가리킨다. 특정 object의 속성이 없으면 __proto__를 타고 올라가면서 해당 속성을 찾을 때까지 프로토타입 체인을 타고 올라간다. 자세한 내용은 이미 (이 글)에 정리했다.

let cat = { teeth: 32 }
let dog = { __proto__: cat }

dog.hasOwnProperty("teeth") // false. 프로토타입 체인 타지 말고 확인
console.log(dog.teeth) // 32. 프로토타입 체인을 타고 올라감

 

결론적으론, 아래의 코드를 통해서 prototype과 __proto__ 사이의 관계를 살펴볼 수 있다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Person으로 인해 construct된 객체는 sayName이라는 메서드를 갖게 된다.
Person.prototype.sayName = function () {
  console.log(this.name);
};

const me = new Person('darren', 13); // 함수 객체 생성. 객체이므로 me라는 객체는 __proto__ 지니고 있음
me.sayName(); // "darren"

console.log(me.__proto__); //__proto__는 prototype을 가리킴 => { sayName: [Function (anonymous)] }

 

물론, 실제 코딩할 땐 프로토타입은 일종의 '숨김' 역할을 하기 때문에 굳이 적극적으로 프로토타입 메서드를 만들지는 않았다.

실제로도 프로토타입을 사용하는 것은 그렇게 권장되지 않는다고 한다. (Dan abramov 피셜임 ㅇㅇ)