[JavaScript] 자바스크립트 프로토타입 이해하기!

프로토타입이란?

• 자바스크립트의 모든 객체는 자신의 "원형(Prototype)" 이 되는 객체를 가지며 이를 프로토타입이라고 한다.
  뭔소린지 모르겠다. 원형이 되는 객체? 의미가 다소 추상적이지 않는가 예시 코드를 보며 이해해보자.

  <script>
    function 사람() {
        this.name = 'june';
        this.age = 19;
    }
  </script>

  먼저 사람 이라는 생성자 함수를 추가해주었다. 사람은 고유의 이름과 성별 나이 등을 가지고 있을 수 있는데, 현재는 이름과 나이 뿐이다.
  따라서 사람 이라는 객체에 프로토타입을 활용하여 gender 라는 값을 추가해볼 예정이다.

• 먼저 출력해보기
  생성자를 호출하여 사람 객체 하나를 만들고 값을 출력해보았다.
  이전에 정의한 대로 name과 age가 잘 들어있는 것을 볼 수 있다.

  <script>
    function 사람() {
        this.name = 'june';
        this.age = 19;
    }
  var person = new 사람();
  console.log(person); // {name: 'june', age: 19}
  </script>

  우리는 여기서 프로토타입을 활용하여 gender라는 필드를 추가해줄 것이다.
  앞서 초반에 프로토타입에 대한 정의로 자바스크립트의 모든 객체는 자신의 원형 이 되는 객체를 갖는다고 하였다 그렇다면 우리가 생성한 person객체 또한 원형이 되는 객체가 있다는 의미가 아닐까? 다른 객체지향형 언어 들을 다루어보았다면 이 개념이 부모-자식 관계와 유사함을 느낄 것이다.
  마치 우리가 생성한 person 이라는 객체는 자식에 해당하고 person 의 원형은 부모에 해당하는 것으로 비유할 수 있다.

• gender 필드 추가하기
  person 객체의 부모(프로토타입) 에 gender라는 필드를 추가하려면 해당 프로토타입에 접근할 필요가 있다.

  사람.prototype.gender = 'male'

  프로토타입에 접근하는 방법은 '사람' 이라는 생성자 함수를 통해 부모 객체에 접근할 수 있다.
  부모 객체에 접근한 이후 gender 라는 필드를 추가하고 해당 필드 값으로 'male' 을 추가해 주었다.

• 추가한 gender 필드 출력해보기
  코드를 한번 보자 '사람' 이라는 생성자를 호출하여 person객체를 만들었다 그리고 ( 사람.prototype.gender = 'male' ) 을 통해 프로토타입에 gender라는 필드를 추가하고 male 값을 넣어주었다. 그런데 person객체를 출력해보면 어디에도 gender라는 필드는 존재하지 않는다.
  사실 우리가 추가한 gender라는 필드는 person 객체에 추가된 것이 아니다.
  person객체의 부모 객체인 prototype에 추가된 것이다 따라서 ( console.log(person.gender); ) person 객체를 참조하여 gender 필드의 값을 가져올 수 있는 이유는 프로토타입 체인 덕분이다.

  function 사람() {
        this.name = 'june';
        this.age = 19;
    }
    사람.prototype.gender = 'male'
    var person = new 사람();
    console.log(person); // {name: 'june', age: 19}
    console.log(person.gender); // 'male'

프로토타입 체인

자바스크립트는 특정 객체의 필드에 접근할 때 만약 존재하지 않는 필드라면 내부 슬롯의 참조를 따라 상위 프로토타입의 필드를 순차적으로 검색한다.
즉 자바스크립트는 객체에서 뭔가를 찾을 때 없으면 "부모한테 가서 물어보는" 방식으로 동작한다는 의미 이다.
[프로토타입 체인 흐름]

1. gender : "gender라는 필드가 person 객체에 없는데?
2. 사람.prototype : "여기에 gender 필드가 있고 값은 male이야"
3. male 값 반환

   function 사람() {
        this.name = 'june';
        this.age = 19;
    }
    사람.prototype.gender = 'male'
    var person = new 사람();
    console.log(person); // {name: 'june', age: 19}
    console.log(person.gender); // 'male'

   예시 코드를 다시 보면 우리가 만든 person객체에는 gender라는 필드가 존재하지 않는다.
   따라서 ( person.gender ) 는 프로토타입 체인에 따라 상위 프로토타입을 검색하게 되고 여기서 ( 사람.prototype.gender = 'male' ) 이런 코드를 통해 앞서 프로토타입에 gender라는 필드를 추가해주었기 때문에 'male' 이라는 값을 가져올 수 있게 되는 것이다!