prototype 맛보기

prototype이 뭐죠...?

• 쉽게 말해 클래스 기반 언어에서 상속을 사용하는 것처럼 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제함으로 상속과 비슷한 효과를 내는 것

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

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

  // new Person으로 suzy 객체 생성 시 준 suzy는 _name에 바인딩되어 짐
  var suzy = new Person('suzy');

  // suzy라는 객체 안에 _name은 suzy로 getName()시 suzy가 반환
  console.log(suzy.getName()); //suzy

  // suzy__proto__안에 있는 getname이라는 함수 실행 
  console.log(suzy.__proto__.getName()); //undefined

  /**
   *  error가 아닌 undefined가 나오는 이유는? 왜 값이 출력되지 않지 ? 
   *  1. 에러가 나지않는 이유
   *   - __proto__는 Constructor의 prototype 프로퍼티를 참조하기 때문에 결국 둘은 같은 객체를 바라봄
   *  2. 값이 나오지 않는 이유
   *  메서드는 .앞에 있는 객체를 this로 바인딩한다. 이 때 getName메서드를 보았을 때 this._name이 있는데 
   *  그렇다면 결국 참조는 suzy.__proto__에 _name을 참조하게 된다. suzy.__proto__에는 _name이 없기 때문에 출력이 안됨!
   */

  // __proto__ 에 _name으로 suzi_proto 선언
  suzy.__proto__._name = 'suzi__proto__'


  // suzi.__proto__에 _name을 만들어 주었기에 이제는 값을 받아올 수 있다.
  console.log(suzy.__proto__.getName()); // suzy__proto__

  // 문제 해결 방법
  // __proto__는 생략 가능한 프로퍼티
  console.log(suzy.getName()); // suzy

__proto__는 언제생기죠?

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