1. 프로토타입 객체란?
2. 프로토타입 객체의 목적
3. 프로토타입 체인
4. 프로토타입 객체 확장과 변경

1.프로토타입 객체란?

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다

2.프로토타입 객체의 목적

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. 객체를 생성할 때 프로토타입은 결정된다. 결정된 프로토타입 객체는 다른 임의의 객체로 변경할 수 있다. 이것은 부모 객체인 프로토타입을 동적으로 변경할 수 있다는 것을 의미한다. 이러한 특징을 활용하여 객체의 상속을 구현할 수 있다. --> 프로토타입 객체의 목적은 프로퍼티를 공유하고 상속을 구현한다라고 보면 되겠네요.

3.Prototype chain(프로토타입 체인)

자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다.[[Prototype]]이 가리키는 링크는 __proto__접근자를 사용한다. --> 상속과 공유 프로퍼티를 구현할 수 있는 근거라고 보면 되겠습니다.

function Person(name,gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! my name is ' + this.name);
  };
}

var foo = new Person('Lee','male');
var poo = new Person('susan','female');

Person.prototype.age = 10; 

console.log(foo.age) //10 foo,poo인스턴스의 나이 모두 10
console.log(foo.hasOwnProperty('age')); //false
console.log(foo.__proto__ === Person.prototype);    //true

foo에 age 프로퍼티를 검색하니 male이 나옵니다.
foo에 age 프로퍼티가 있냐고 물으니 없다고 합니다.
프로퍼티가 없는데 어떻게 foo.age male을 출력하냐고요? 왜냐하면 프로토타입 체인에 의해서 foo.age 탐색시 없으면, foo의 부모인 Person의 프로토타입 객체 Person.prototype의 age 프로퍼티를 검색했기 때문입니다.

즉 age가 10이라는 데이터는 Person.prototype이라는 회색 박스 constructor 속성밑에 추가로 들어가게 되는거죠.

4.프로토타입의 확장/변경

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

Person.prototype.sayHello = function(){
  console.log('Hi! my name is ' + this.name);
};

foo.sayHello();

공유 프로퍼티를 프로토타입객체에 설정하는것 되에 메소드도 설정하여 프로토타입의 기능을 확장시켜 줄수 있습니다. 변경은 어떨까요?

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

// 프로토타입 객체의 변경
Person.prototype = { gender: 'male' };

var bar = new Person('Kim');

console.log(foo.gender); // undefined
console.log(bar.gender); // 'male'

객체를 생성할 때 프로토타입은 결정된다. 결정된 프로토타입 객체는 다른 임의의 객체로 변경할 수 있다. 이것은 부모 객체인 프로토타입을 동적으로 변경할 수 있다는 것을 의미한다. 이러한 특징을 활용하여 객체의 상속을 구현할 수 있다.
--> 동적으로 상속을 바꿀수 있다니... 이건 좀 귀하네요 ㅋㅋ

실제로 foo와 bar의 prototype을 검색해보면(__proto__ 프로퍼티로 검색해야 한다고 했죠?) foo는 Person을 bar는 Object.prototype 각각 다른 객체를 가리키고 있습니다. 신기하네요 ㅋㅋ
bar.__proto__의 결과가 오브젝트.프로토타입인 이유는 {} 리터럴 객체로 만든 것을 Person.prototype에 바인딩 해줬기 때문이에요. 이건좀 어렵죠? 그림을 보면서 이해할 수 있을 정도만 이해해주고 넘어갔습니다.

이정도로 정말 간략하게 프토로타입 객체에 대해 알아보았습니다. 개인적으로 정말 많은 시간을 들였는데 너무 많은 시간을 쏟아도 이해가 잘 안되더라구요. 이제야 느낀건 object 바인딩 메소드를 왜쓰는지 알꺼 같더라구요 프로토타입 상속 너무 어렵네요 ㅋㅋ