[Javascript] prototype, __proto__, constructor

prototype

자바스크립트는 prototype기반의 언어라고 한다. 그럼 prototype은 무엇을 말하는걸까?

mdn에서 prototype을 이렇게 말하고 있다.

Javascript는 엄밀히 말해서 하위클래스(sub-class)객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책 입니다.

"특정 함수의 기반클래스 객체를 만드는" 이 부분이 포인트인것 같다.

new 키워드로 객체를 만들어낼수있는 constructor function을 예를 들어,

var Person = function() {
  this.canTalk = true;
};

console.dir(Person)
console.dir(Person.prototype)

을 보면 이런식으로 나온다.

Person은 함수고, property로 prototype을 가지고 있다. 그 property로 console.dir() 해보면 Object라는 객체라고 나온다.

결국 prototype은 어떤 객체를 가리키고 있는 특정 함수의 프로퍼티라고 할수 있겠다. 

다만 그 기능이 특정 함수의 "기반" 이 되는 객체를 가리킨다고 할수 있겠다.

결국 기반이 되는 객체가 상위 객체인것이다.

이것이 javascript가 prototype기반 언어라는 말인것이다.

이 prototype에 속성과 매소드를 만들어 넣으면,

Person.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name);
  }
};

prototype의 메소드로 들어가고 사용은 해당 initiation객체에서 쓸수가 있다.

이 부분은 아래쪽에서 한번 더 설명할것이다.

 

---

__proto__

constructor function으로 객체를 생성하고 console.dir() 을 해보자.

내부를보면 __proto__라는 property 가 있다. __proto__를 보면 constructor 와 다시 __proto__가 있다.

__proto__ 이녀석은  해당 constructor function (여기서는 Person) 의 prototype과 동일한 녀석이다.(같은 기반객체를 가리킨다고 보면 된다.)

이를 그림으로 표현해보면,

 

이런식이 될것이다.

 

그렇다면 이전에 prototype에 greet 함수를 추가 시켯으니 해당 객체의  __proto__에서도 이 함수를 볼수가 있을것이다.

그렇기 때문에 해당 객체에서 이 함수를 사용할수가 있는것이다.

---

constructor

constructor는 말하자면 만들어진 인스턴스가 누구에 의해 만들어 졌는지 알수있는 것을 말한다.

그림으로 보면, 

이런식으로 될것같다.