프로토타입

1. 시작하며

function Person(name, age, gender) {
  // 속성과 메소드 정의
  this.name = name;
  this.age = age;
  this.gender = gender;

  walk = function () {
    console.log(`${this.name}은 걷습니다.`);
  };
}

var person1 = new Person("Gildong", 20, "male");

console.log(Person.prototype.constructor === Person); // 1번 => true
console.log(Person.prototype === person1.__proto__); // 2번 => true
console.log(Person.prototype.walk === person1.walk); // 3번 =>true

 위의 코드에서 마지막 3줄은 전부 true가 출력된다. prototype, __proto__ 등의 처음 보는 것들이 나와 이해하기 어렵다. 어째서 저 3줄은 전부 true를 출력하는 것일까. 이 의문에 대한 해답은 바로 프로토타입에 있다.

 

2. 프로토타입

 모든 객체들은 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 그리고 프로토타입 객체 또한 상위 프로토타입 객체로부터 메소드와 속성을 상속받을 수 있는데, 이를 프로토타입 체인이라 한다. 그리고 상속되는 속성과 메소드들은 각 생성자의 prototype이라는 속성에 정의되어 있으며, 많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있다.

프로토타입 체인 (Prototype Chain)

---

2. 프로토타입 속성, 생성자 속성

 프로토타입 속성(sub-namespace)이란 상속 받은 멤버들이 정의된 곳이다. 그리고 이것들은 Object.prototype.~로 시작한다. prototype 속성 또한 하나의 객체이며, 프로토타입 체인을 통해 속성과 메소드를 담아두는 버킷으로 주로 사용된다. 그렇기 때문에 Object.prototype을 상속받는다면 어디서라도 접근할 수 있다. 또한 모든 생성자 함수는 constructor 속성을 지닌 책체를 프로토타입 객체로 가지고 있으며, 이는 원본 생성자 함수 자신을 가리킨다.

---

3. 마치며

 자바스크립트에서는 모든 객체들이 프로토타입 객체를 가진다. 그렇기 때문에 첫 번째 코드의 3개의 console.log는 true를 출력하게 된다. 프로토타입에 대해 최대한 이해하고 자신의 글을 쓰려 노력했으나, 결국 참고한 mdn의 글을 배껴쓰다시피 한 글이 되어버렸다. 아마 이는 이해를 잘 못했기 때문일 것이다. 적어도 남들에게 설명해줄 수 있을 때 까지, 서두르지 않고 반복해서 복습해야겠다.

---

참고: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes