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)
함수 선언문 : 런타임 이전에
자바스크립트 엔진에서 먼저 실행됨.
함수 선언문으로 정의된 Person 생성자 함수는 어떤 코드보다 먼저 평가됨. -> 함수 객체 됨. + 프로토타입 생성됨.
생성된 프로토타입 --- Person 생성자 함수의 prototype 프로퍼티에 바인딩 됨.
1) 사용자가 직접 정의 : 객체 생길 때 프로토타입 생성됨.
프로토타입 == 객체.
모든 객체는 프로토타입을 가진다.
프로토타입도 자신의 프로토타입을 갖는다.
프로토타입의 프로토타입은 Object.prototype이다.
2) 자바스크립트가 기본 제공: 객체 생길 때 프로토타입 생성됨.
빌트인 생성자 함수 : Object, String, Number, Function, Array, RegExp, Date, Promise
생성자 함수가 생성되는 시점에 프로토타입이 생성된다.
모든 빌트인 생성자 함수..... 전역 객체가 생성되는 시점에 생성된다.
빌트인 생성자 함수 - prototype 프로퍼티 ------ 생성된 프로토타입 연결됨
전역 객체 : 자바스크립트 엔진에 의해 생성되는 특수한 객체.
이미 객체가 생성되기 이전에
생성자 함수, 프로토타입은 이미 객체화 되어 존재함.
이후 생성자 함수, 리터럴 표기법으로 객체를 생성하면
--------------------------------------->[[Prototype]] 내부 슬롯 ----> 프로토타입 여기에 할당 됨!!!!!!!!!!!
19.6 객체 생성 방식과 프로토타입의 결정
객체의 생성 방식
1) 객체 리터럴
2) Object 생성자 함수
3) 생성자 함수
4) Object.create 메서드
5) 클래스 (ES6)
5개의 공통점: 추상 연산에 전달되는 인수에 의해 결정된다.
프로토타입은 추상연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다.
전달되는 걸로 [[Prototype]] 내부에 할당한다는거임~~~ 어렵게 생각 노노
1) 객체 리터럴 : Object.prototype이 부모
2) new Object( )
Object 생성자 함수에 의해 생성된 객체 프로토타입
애도 Object.prototype 프로토타입이 생성된다.
1) 리터럴, 2) new Object()(Object 생성자 함수)의 부모는 똑같이 생김? ㅇㅇ
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(); |
19.7 프로토타입 체인 : 내가 없으면 부모를 뒤진다...
객체의 프로퍼티에 접근할때
해당 객체에 접근하려는 프로퍼티가 없다면... [[Prototype]] 내부슬롯의 참조를 따라.... 부모를 뒤진다....
이를 프로토타입 체인이라고 한다.
Object.prototype 이 프로토타입 체인의 종점이다!!!
이구조로 자바스크립트 엔진은 프로퍼티(데이터), 메서드를 검색한다...
계층적으로 아래서 위로 검색함!!
프로퍼티가 아니라면??
스코프 체인에서 검색한다.
==> 함수의 중첩관계
'자바스크립트-스터디[2021-10-05~완료]' 카테고리의 다른 글
질문 (0) | 2021.11.18 |
---|---|
[6주차] 참조, 얕은 복사, 깊은 복사 (0) | 2021.11.17 |
19장 프로토타입 (0) | 2021.11.11 |
ajax (0) | 2021.11.11 |
18 함수와 일급 객체 (0) | 2021.11.01 |