프로토타입의 생성 시점
- 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.
사용자 정의 생성자 함수
- 생성자 함수 즉 constructor는 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
- non-constructor는 프로토타입이 생성되지 않는다.
- 함수 선언문은 런타임 이전 JS엔진에 의해 먼저 실행되므로 (호이스팅) 어떤 코드보다 먼저 평가되어 함수 객체가 된다. 이때 프로토타입도 더불어 생성된다.
- 생성된 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩 된다.
빌트인 생성자 함수
- 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성된다.
- 생성된 프로토타입은 생성된 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩 된다.
- 객체가 생성되기 이전 생성자 함수와 프로토타입은 객체화 되어있다. 객체를 생성하면 생성된 객체의 [[Prototype]] 내부 슬롯에 프로토타입이 할당되어 상속받는다.
객체 생성 방식과 프로토타입 결정
- 추상연산?
- 빈 객체 생성
- 객체에 추가할 프로퍼티 목록이 인수로 전달된 경우 프로퍼티를 객체에 추가
- 프로토타입을 [[Prototype]] 내부 슬롯에 할당
- 생성한 객체를 반환
객체 리터럴에 의해 생성된 객체의 프로토타입
- 프로토타입은 Object.prototype
Object 생성자 함수에 의해 생성된 객체의 프로토타입
- 프로토타입은 Object.prototype
객체 리터럴과 Object 생성자 함수에 의한 객체 생성 차이는 프로퍼티를 추가하는 방식에 있다.
생성자 함수에 의해 생성된 객체의 프로토타입
- 프로토타입은생성자 함수의 prototype에 바인딩되어 있는 객체
- 프로토타입에 프로퍼티를 추가/삭제할 수 있고, 즉각 프로토타입 체인에 반영된다
프로토타입 체인
- 자바스크립트는 객체의 프로퍼티에 접근하려할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯에 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적을 검색한다. 이를 프로토타입 체인이라 한다.
- 프로토타입의 프로토타입은 언제나 Object.prototype이다. 이를 프로토타입 체인의 종점이라 한다.
- Object.prototype에서도 검색할 수 없는 경우 에러가 아닌 undefined를 반환한다.
- 스코프 체인과 프로토타입 체인은 서로 협력하여 식별자와 프로퍼티를 검색한다.
오버라이딩과 프로퍼티 섀도잉
- 프로토타입이 소유한 프로퍼티를 프토토타입 프로퍼티, 인스턴스가 소유한 프로퍼티를 인스턴스 프로퍼티
- 프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가 하였을 경우, 프로토타입 체인을 따라 인스턴스 프로퍼티를 참조하게 되는데 이를 오버라이딩과 프로퍼티 섀도잉이라 한다.
- 인스턴스 프로퍼티가 오버라이딩 한 것이고, 프로토타입 프로퍼티가 섀도잉 당한 것.
- 상위 클래스가 가지고 있는 매서드를 하위 클래스가 재정의하여 사용하는 방식이다
프로토타입의 교체
생성자 함수에 의한 프로토타입의 교체
const Person = (function(){
function Person(name){
this.name = name;
}
Person.prototype = {
sayHello(){
console.log(this.name)
}
}
return Person;
})()
const me = new Person('Lee');
- Person.prototype에 객체 리터럴을 할당했다.
- constructor 프로퍼티가 없다. 따라서 me 객체의 생성자 함수를 검색하면 Object가 나온다.
인스턴스에 의한 프로토타입의 교체
//위 예제에서
const parent = {
sayHello(){
console.log(`hi ${this.name}`)
}
}
Object.setPrototypeOf(me, parent)
- 프로토타입 객체를 교체할 때 constructor 프로퍼티를 넣지 않으면 암묵적으로 추가된 constructor 프로퍼티틑 사라진다.
- proto 접근자 프로퍼티를 이용하여 프로토타입을 교체하는 것은 이미 생성된 객체의 프로토타입을 교체하는 것이다.
294P의 그림을 보고 복습하자
- 프로토타입 교체를 통해 상속 관계를 동적으로 변경하는 것은 좋지않다.
'기술 서적 > 하루 30분 모딥다' 카테고리의 다른 글
하루 30분 모던 자바스크립트 딥 다이브 빌트인 객체 (0) | 2023.06.29 |
---|---|
하루 30분 모던 자바스크립트 딥 다이브 프로토타입3 (0) | 2023.06.27 |
하루 30분 모던 자바스크립트 딥 다이브 프로토타입1 (0) | 2023.06.22 |
하루 30분 모던 자바스크립트 딥 다이브. 함수와 일급 객체 (0) | 2023.06.21 |
하루 30분 모던 자바스크립트 딥 다이브. 생성자 함수에 의한 객체 생성 (0) | 2023.06.20 |