1. 프로토타입의 개념 이해

6-1-1. constructor, prototype, instance

위 그림은 프로토타입의 구조를 도출해낸 그림이다. 위 그림은 다음의 내용과 같다.

• 코드 6-1

  var instance = new Constructor()
  

윗변의 왼쪽 꼭짓점에는 Constructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor.prototype이라는 프로퍼티를 위치시켰다.

아래에는 Constructor로부터 아래방향으로 new와 화살표가 있고 그 화살표의 끝에는 instance가 있다.

또한 윗변의 오른쪽 꼭짓점(Constructor.prototype)으로부터 대각선 아래 방향으로 화살표가 있으며 이것은 instance.__proto__를 가리키고 있는것을 확인할 수 있다.

이 구조가 뜻하는 과정은 다음과 같다.

1. 어떤 생성자 함수를 new 연산자와 함께 호출
2. Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스 생성
3. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여
4. 이 프로퍼티는 Constructor.prototype을 참조

prototype이라는 프로퍼티와 __proto__라는 프로퍼티의 관계가 프로토 타입 개념의 핵심

prototype은 객체이며 이것을 참조한 __proto__역시 객체임. prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장하면 인스턴스에서도 숨겨진 프로퍼티인 __proto__를 통해 이 메서드들에 접근할 수 있음.

다음의 코드를 통해 확인해보자.

• 예제 6-1. Person.prototype

  var Person = function(name) {
    this._name = name;
  };
  Person.prototype.getName = function() {
    return this._name;
  };
  

  • Person의 prototype에 getName이라는 메서드를 생성했다. 그럼 이제 Person으로 생성된 인스턴스는 __proto__ 프로퍼티를 사용해 getName을 호출할 수 있다.

  var suzi = new Person("Suzi")
  
  suzi.__proto__.getName() // undefined
  

왜냐하면 instance의 __proto__가 Constructor의 prototype 프로퍼티를 참조하므로 둘은 같은 객체를 바라보기 때문이다.

여기서 getName의 호출결과가 undefined인 점에 주목하기보다는 "에러가 발생하지 않았다"는 점이 더 중요하다. getName의 호출결과가 undfined가 나온 것은 이 변수가 (여기서는 getName이) "호출할 수 있는 함수"에 해당한다는 것을 의미한다.

이로써 우리는 getName을 __proto__를 사용하여 접근할 수 있다는 것을 확인했다. 그렇다면 왜 우리가 기대한 name이 정상적으로 호출되지 않은걸까?