6-1 프로토타입의 개념

프로토타입의 개념을 이해하기 위해 먼저 클래스를 알아보자.

<script>
  function 공장() {
    this.width = 71.5;
    this.height = 146.7;
  }
</script>

es6 문법에서 class가 등장했지만 사실 class도 내부적으로는 위와 같이 동작하는 함수이다.

위 함수를 new 연산자를 이용하여 다음과 같이 인스턴스를 생성할 수 있다.

생성된 인스턴스를 살펴보면 prototype라는 프로퍼티를 확인할 수 있는데, 자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 생성해 놓는다.

프로토타입은 일종의 유전자라고 생각하면 쉽다.

<script>
  function 공장() {
    this.width = 71.5;
    this.height = 146.7;
  }

  공장.prototype.brand = "Apple";

  var iphone = new 공장();
</script>

위와 같이 생성자 함수의 prototype에 프로퍼티를 추가하면, 해당 함수로 생성된 인스턴스들은 해당 프로퍼티를 사용할 수 있다.

인스턴스에는 숨겨진 프로퍼티인 proto가 자동으로 생성되며, 이 프로퍼티는 생성자 함수의 prototype을 참조하고 있기 때문에 인스턴스에서도 prototype 프로퍼티에 접근할 수 있다.

proto 프로퍼티는 생략이 가능하여 인스턴스에서 프로퍼티를 찾지 못할 경우, proto 프로퍼티를 이용하여 prototype 프로퍼티에 접근한다. 이것을 프로토타입 체인이라고 한다.

쉽게 말해 prototype은 생성자함수의 프로퍼티이고, proto는 인스턴스에서 생성자의 prototype 에 접근할 수 있는 연결고리이다.

6-1. 프로토타입의 개념