prototype과 __proto__

자바스크립트에서 함수는 객체이다.

따라서 속성을 가질 수 있고 아래와 같이 나타낼 수도 있다.

//둘 다 같은 뜻
function Player() {...}

var Player = new Function();

 

Player라는 객체를 생성하면 Player라는 객체와 prototype 객체가 생성된다.

function Player(username, level) {
    this.username;
    this.level;
}

이제 Player 객체의 prototype은 Player 객체의 prototype 객체를 가리킨다.

Player 객체의 prototype 객체또한 constructor 속성에 Player 객체를 기록한다.

 

그림

즉, 서로 참조하는 상태이다.

여기에 showUserInfo라는 메소드를 추가해본다.

Player.prototype.showUserInfo = function() {}

 

그림

 

생정자를 이용해 새로운 객체를 생성해본다.

var player1 = new Player('lumine', 57)

 

그림

player1 객체는 constructor 함수가 실행되면서 this의 값이 세팅된 결과 속성값이 생성되고

동시에 __proto__라는 속성도 생성된다.

자바스크립트는 __proto__의 값으로 해당 객체를 생성한 생성자의 prototype을 가리키게 한다.

 

어떤 객체에서 메소드나 속성을 호출할 때

자바스크립트는 먼저 해당 객체에 호출하려는 값이 있는지 살피고

없다면 그 객체의 __proto__ 속성이 가리키는 prototype 객체에서 호출하려는 값을 찾는다.

만약 prototype 객체에서 찾지 못한다면 상위 객체로 올라가면서 찾게 된다.

마지막 객체까지 살펴도 없다면 에러가 발생한다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs124

자바스크립트의 시작