Gidhub BE Developer

프로토타입(Prototype)

2018-11-13
goodGid

  • 총 3가지에 대해 알아보자.

  • prototype, constructor, __proto__

  • 생성자 함수가 있을 때 (=Constructor)

  • new 연산자를 써서 인스턴스를 만들면



  • 생성자 함수의 prototype이라고 하는 프로퍼티

  • 인스턴스의 __proto__라고하는 프로퍼티에게 전달이 된다.

  • 즉 생성자 함수의 prototype과 인스턴스의 __proto__는 같은 객체를 참조한다.

  • 다시말해 prototype은 객체이다.



  • 그런데 __proto__는 내부 프로퍼티에 접근할 때 단어 생략이 가능하다.

  • 즉 이런식으로 연결이 되어 있는거 처럼 동작한다.


  • 구체적인 데이터를 통해 더 알아보자.

  • Array 생성자에는 from() isAraay() 등등 다양한 메소드와 length, prototype이라는 프로퍼티가 존재한다.

  • 그 중 Array 생성자의 prototype에는 배열이 사용하는 메소드가 들어있다.


  • Array의 prototype 프로퍼티는

  • 배열(= [1,2,3])의 __proto__에 연결이 되어있다.

  • 즉 다음과 같은 구조가 성립된다.


  • 배열을 크롬 개발자 도구로 살펴보면

  • __proto__에서 Array 생성자 함수의 prototype이 갖고 있는 메소드를 확인할 수 있다.


  • 그리고 배열.constructor배열._____proto_____.constructor는 똑같은 값을 출력한다.

  • __proto__는 생략이 가능함을 알 수 있다.


  • 여기있는 원본(=gomu)과 클론(=Clone)들은 모두 Person의 인스턴스가 된다.

  • 아래 4가지 변수들은 모두 동일한 객체를 가리킨다.

  • 그로인해 뒤에 있는 부분들도 모두 동일한 함수를 가리킨다.


  • 즉 4가지 방식에 의해서 생성자 함수의 prototype에 접근이 가능하고

  • 이 5가지 방식으로 생성자 함수에 접근이 가능하다.

  • [Constructor].prototype.constructor는 자기 자신을 가리킨다.

  • Object.getPrototypoof([instance])는 [Constructor].prototype과 같다.

  • [instance].__proto__역시 [Constructor].prototype를 가리킨다.

  • 여기서 proto__는 생략이 가능하기 때문에 [instance]는 [instance].__proto__와 같다.


Comments

Content