코어 자바스크립트 06_프로토타입

✔ 6-1 프로토타입의 개념 이해✍

◽ 6-1-1 constructor, prototype, instance

var instance = new Constructor();

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

pototype이라는 프로퍼티와 __proto__라는 프로퍼티가 새로 등장했는데, 이 둘의 관계가 프로토타입의 핵심이다. protytpe은 객체이다. 이를 참조하는 proto역시 객체가 된다.

ex) Person.prototype

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

var suzi = new Person('Suzi');
Person.prototype ===suzi.__proto__
suzi.__proto__.getName (); // undefined
suzi.getName(); // Suzi

instance의 __proto__가 Constructor의 prototype 프로퍼티를 참조하므로 결국 둘은 같은 객체를 바라본다.
한가지 의문점은 suzi.__proto__.getName (); 의 결과가 undefined인 것이다.
여기서 this 는 suzi.__proto__가 되기 때문이다. __proto__없이 인스턴스에서 곧바로
메서드를 쓰게 되면 Suzi가 잘 나온다. 왜 값이 나올까?😮
그 이유는 바로 __proto__가 생략 가능한 프로퍼티이기 때문이다!

ex) 대표적인 내장 생성자 함수인 Array

var arr =[1,2];
console.log(arr);
console.log(Array);

Array를 new 연산자와 함께 호출해서 인스턴스를 생성하든, 그냥 배열 리터럴을 생성하든, instance[1,2]가 만들어진다. 이 인스턴스의 __proto__은 Array.prototype을 참조하는데, __proto__가 생략 가능하도록 설계돼 있기 때문에 인스턴스가 push,pop,forEach 등의 메서드를 마치 자신의 것처럼 호출할

✔ 6-2 프로토타입 체인 ✨

◽ 6-2-1 메서드 오버라이드

• prototype 객체를 참조하는 __proto__를 생략하면 인스턴스는 prototype에 정의된 프로퍼티나 메서드를 마치 자신의 것처럼 사용할 수 있다고 했다. 그런데 만약 인스턴스가 동일한 이름의 프로퍼티 또는 메서드를 가지고 있는 상황이라면 어떨까?

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

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

var iu = new Person('지금');
iu.getName = function(){
  return '바로'+this.name;
};

console.log(iu.getName()); // 바로 지금 

iu.__proto__.getName이 아닌 iu 객체에 있는 getName 메서드가 호출 되는 것을 알 수 있다. 여기서 일어난 현상은 메서드 오버라이드다. 메서드 위에 메서드를 덮어씌었다는 표현이다. 그렇다면 메서드 오버라이딩이 이뤄져 있는 상황에서 prototype에 있는 메서드에 접근하려면 어떻게 해야 할까?

Person.protytpe.name = '이지금';
console.log(iu.__proto__.getNmae());  // 이지금 

console.log(iu.__proto__.getName.call(iu)); // 지금