[5주차]19.5 프로토타입의 생성 시점

19.5 프로토타입 생성 시점

객체 생성: 리터럴 표기법, 생성자 함수, Object.create 메서드, 클래스

모든 객체-------------------생성자 함수와 연결

 

프로토타입은 생성자 함수가 생성되는 시점에 생성됨.

 

생성자 함수

  1) 사용자가 직접 정의 : 

        function Person(name){

           this.name = name;
         };

  2) 자바스크립트가 기본 제공:(빌트인 생성자 함수)

        Object(); String(); Number(); Function(); Array(); RegExp();  Date(); Promise;

 

빌트인 생성자 함수

<생성자 함수로 호출 할 수 있는 함수> == 프로토타입이 있다.

(1) 내부 메서드 [[Construct]]를 갖는 함수 객체

(2) 일반 함수(함수 선언문, 함수 표현식)로 정의한 함수 객체

 + new 연산자 -------> 생성자 함수로 호출 가능.

 

<생성자 없는 함수> ==  프로토타입 없다.

(3) 화살표 함수(X)

(4) ES6 메서드 축약 표현 (X)

 

 

함수 정의(Constructor)가 평가됨 --&amp;amp;amp;gt; 함수 객체를 생성하는 시점에 프로토타입도 생성됨.&amp;amp;amp;nbsp;

함수 선언문 : 런타임 이전에

자바스크립트 엔진에서 먼저 실행됨.

함수 선언문으로 정의된 Person 생성자 함수는 어떤 코드보다 먼저 평가됨. -> 함수 객체 됨. + 프로토타입 생성됨.

생성된 프로토타입 --- Person 생성자 함수의 prototype 프로퍼티에 바인딩 됨.

 

 

화살표 함수::: 함수 정의(Constructor)가 평가 안됨 --&amp;amp;amp;gt; 프로토타입도 생성 안됨

생성자 함수::: 생성자, 프로토타입이 있다.

 

 

 

 

1) 사용자가 직접 정의 : 객체 생길 때 프로토타입 생성됨.

생성된 프로토타입은 오직 Constructor 프로퍼티 만을 갖는 객체다.

프로토타입 == 객체. 

모든 객체는 프로토타입을 가진다.

프로토타입도 자신의 프로토타입을 갖는다.

프로토타입의 프로토타입은 Object.prototype이다.

 

빌트인 생성자 함수가 아닌 사용자 정의 생성자 함수 == 프로토타입의 프로토타입은 언제나 Object.prototype이다.

 

 

 

 

 

 

2) 자바스크립트가 기본 제공: 객체 생길 때 프로토타입 생성됨.

빌트인 생성자 함수 : Object, String, Number, Function, Array, RegExp, Date, Promise

생성자 함수가 생성되는 시점에 프로토타입이 생성된다.

모든 빌트인 생성자 함수..... 전역 객체가 생성되는 시점에 생성된다.

 

빌트인 생성자 함수 - prototype 프로퍼티 ------ 생성된 프로토타입  연결됨

 

빌트인 생성자 함수를 prototype으로 출력하니 자기자신과 모양이 같은애의 프로토타입이 연결되어있네!!!!

 

이런걸 말하고 싶은걸까????

뱀이 서로를 먹는거 같군

우로보로스

 

전역 객체 : 자바스크립트 엔진에 의해 생성되는 특수한 객체.

이미 객체가 생성되기 이전에 

생성자 함수, 프로토타입은 이미 객체화 되어 존재함.

 

이후 생성자 함수, 리터럴 표기법으로 객체를 생성하면

--------------------------------------->[[Prototype]] 내부 슬롯  ----> 프로토타입 여기에 할당 됨!!!!!!!!!!!

 

 

 

---

19.6 객체 생성 방식과 프로토타입의 결정

 

객체의 생성 방식

1) 객체 리터럴

2) Object 생성자 함수

3) 생성자 함수

4) Object.create 메서드

5) 클래스 (ES6)

 

5개의 공통점: 추상 연산에 전달되는 인수에 의해 결정된다.

프로토타입은 추상연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다.

전달되는 걸로 [[Prototype]] 내부에 할당한다는거임~~~ 어렵게 생각 노노

1) 객체 리터럴 : Object.prototype이 부모

 

빨간색: 리터럴 객체의 contructor 에 초록색 Object가 들어가는거같구.&amp;nbsp; 하늘색은 Object에 들어있는 함수를 상속받아서 사용! 보라색은 새롭게 y 프로퍼티를 생성함.

 

리터럴 부모

 

2) new Object( )

Object 생성자 함수에 의해 생성된 객체 프로토타입

 

애도 Object.prototype 프로토타입이 생성된다.

리터럴이나 new Object() 부모 똑같음

 

1) 리터럴, 2) new Object()(Object 생성자 함수)의 부모는 똑같이 생김? ㅇㅇ

1), 2) 부모 똑같이 생김

 

 

3) 생성자 함수에 의해 생성된 객체의 프로토타입

: 자기랑 똑같은게 부모 > 조상은 Object

 

생성자 함수??? 이렇게 생김

생성자 있음.

아래랑 이거랑 같은 원리라는데 좀 느껴지나??

생성자 함수-------- prototype 프로퍼티 : Object (빨간색)

하지만 사용자 정의 생성자 함수--- 프로토타입의 Person.prototype 프로퍼티는 constructor 뿐이다.... 그림에서 1시방향 하나잖아.

 

프로토타입  Person.prototype 에 프로퍼티 추가!!!!

즉 부모한테 자동차 생성함.

자식이 상속 받을 수 있게 해보자!!!

자식도 부모 자동차 탈 수 있음. (me, you)

프로토타입으로 프로퍼티 추가. 객체가 상속 받을 수 있다.

function Person(name){  this.name = name; }//생성자 함수 const me = new Person('wonny'); console.log(me); Person.prototype.sayYa = function(){   console.log(`야야~~~~ ${this.name}`); };// 프로토타입 메서드.... Person.prototype 에 프로퍼티 추가함! const you = new Person('lee'); you.sayYa();

me 도 sayYa() 할 수 있다.

생성자 함수로 me, you 를 만들면... 생성자 함수가 부모, Object가 조상

 

19.7 프로토타입 체인 : 내가 없으면 부모를 뒤진다...

 

 

 

객체의 프로퍼티에 접근할때

해당 객체에 접근하려는 프로퍼티가 없다면... [[Prototype]] 내부슬롯의 참조를 따라.... 부모를 뒤진다....

이를 프로토타입 체인이라고 한다.

 

 

Object.prototype 이 프로토타입 체인의 종점이다!!!

 

이구조로 자바스크립트 엔진은 프로퍼티(데이터), 메서드를 검색한다...

 

계층적으로 아래서 위로 검색함!!

 

프로퍼티가 아니라면??

스코프 체인에서 검색한다.

 

==> 함수의 중첩관계