[JavaScript] 모던 자바스크립트 Deep Dive 19장 - 프로토타입
2022. 7. 28. 22:05ㆍWeb/JavaScript

19.1 객체지향 프로그래밍
객체지향 프로그램이란 프로그램을 독립적인 객체의 집합으로 표현하려는 프로그래밍 패러다임을 말한다.
19.2 상속과 프로토타입
상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.
자바스크립트는 프로토타입을 기반으로 상속을 구현한다.
function Circle(radius){
this.radius = radius;
}
// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function(){
return Math.PI * this.radius ** 2;
}
const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circls.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172
19.3 프로토타입 객체
프로토타입이란 객체지향 프로그래밍의 근간을 이루는 객체 간의 상속을 구현하기 위해 사용된다.
19.3.1 __proto__ 접근자 프로퍼티
- __proto__ 는 접근자 프로퍼티다.
- __proto__ 접근자 프로퍼티는 상속을 통해 사용된다.
- __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유는 상호 참조에 의해 프로포타입 체인이 생성되는 것을 방지하기 위해서다.
- __proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.
19.3.2 함수 객체의 prototype 프로퍼티
- 함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.
- 화살표 함수와 ES6 메서드 축약 표현으로 정의한 메서드는 prototype을 소유하지 않으며 프로토타입도 생성하지 않는다.
- 모든 객체가 가지고있는 __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.
19.3.3 프로토타입의 constructor 프로퍼티와 생성자 함수
- 모든 프로토타입은 constructor 프로퍼티를 갖는다.
19.4 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재한다.
19.5 프로토타입의 생성시점
프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.
19.6 객체 생성 방식과 프로토타입의 결정
객체의 생성방식
- 객체 리터럴
- Object 생성자 함수
- 생성자 함수
- Object.create 메서드
- 클래스(ES6)
프로토타입은 추상 연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다. 이 인수는 객체가 생성되는 시점에 객체 생성 방식에 의해 결정된다.
19.7 프로토타입 체인
자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다.
19.8 오버라이딩과 프로퍼티 섀도잉
오버라이딩: 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식
섀도잉: 상속 관계에 의해 프로퍼티가 가려지는 현상
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 모던 자바스크립트 Deep Dive 21장 - 빌트인 객체 (0) | 2022.07.29 |
|---|---|
| [JavaScript] 모던 자바스크립트 Deep Dive 20장 - strict mode (0) | 2022.07.29 |
| [JavaScript] 모던 자바스크립트 Deep Dive 18장 - 함수와 일급 객체 (0) | 2022.07.27 |
| [JavaScript] 모던 자바스크립트 Deep Dive 17장 - 생성자 함수에 의한 객체 생성 (0) | 2022.07.27 |
| [JavaScript] 모던 자바스크립트 Deep Dive 16장 - 프로퍼티 어트리뷰트 (0) | 2022.07.25 |