프로토타입
- 객체의 부모역할을 하는 객체
- 자식 객체에게 프로퍼티와 메서드를 상속
프로토타입 사용이유
- 생성자 함수로 인스턴스 생성할 때, 중복 프로퍼티, 메서드 생성해서 자원이 낭비됨
- 만약 10개의 인스턴스 생성하면 동일한 메서드가 10개 생성되는 셈
- 프로토타입을 활용해 상속하여 불필요한 중복 제거 가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // 생성자 함수로 사용한 경우 >> 메서드 중복되어 자원낭비 function Circler(radius) { this.area = radius; this.getArea = function() { return Math.PI * this.radius ** 2; } } // 인스턴스 2개 생성 const circle1 = new Circle(1); const circle2 = new Circle(2); // 동일한 역할을 하는 메소드지만, 각각 인스턴스가 소유해서 자원이 낭비 console.log(circle1.getArea === circle2.getArea); // false // prototype 사용할 경우 >> 상속통해 중복제거 가능 function Circle(radius) { this.area = radius; } Circle.prototype.getArea = function() { return Math.PI * this.radius ** 2; } // 인스턴스 2개 생성 const circle1 = new Circle(1); const circle2 = new Circle(2); // 하나의 메서드를 공유 console.log(circle1.getArea === circle2.getArea); // true | cs |
프로토타입 체인
- 프로토타입이 한 방향으로 연결되어있는 상속구조
- 정확히 말하면 단방향 링크드 리스트
- 객체의 프로퍼티, 메서드에 접근할때 없으면, 프로토타입 체인 따라서 부모 프로퍼티 확인
- 프로토타입 체인의 최상위 객체 : Object.prototype
- 모든 객체는 Object.prototype의 프로퍼티와 메서드 사용 가능
프로토타입, 생성자 함수 관계
- 프로토타입
- 객체의 __proto__로 접근 가능
- __proto__ : 프로토타입에 접근하는 내부 접근자, __proto__ 참조
- constructor 메서드를 가짐 : 생성자 함수
- __proto__ 프로퍼티 : Object.prototype
- 객체의 __proto__로 접근 가능
- 생성자 함수
- prototype 프로퍼티 : Prototype 객체
- __proto__ 프로퍼티 : Function.prototype
- 프로토타입 생성 시점 : 생성자 함수 생성될때 생성
오버라이딩, 프로퍼티 섀도잉
- 오버라이딩 : 프로토타입에 정의된 프로퍼티, 메서드를 객체에서 새롭게 추가
- 객체에 추가된 프로퍼티 호출됨
- 프로토타입 프로퍼티를 덮어쓰는것이 아닌, 객체에 새로운 프로퍼티가 추가
- 프로퍼티 섀도잉 : 객체에 새로운 프로퍼티, 메서드 추가할때, 프로토타입의 것이 가려지는 현상
출처
- 모던 자바스크립트 Deep Dive, Ch 19
'자바스크립트' 카테고리의 다른 글
| [자바스크립트] __proto__ (0) | 2021.02.07 |
|---|---|
| [자바스크립트] 직접상속 Object.create (0) | 2021.02.07 |
| [자바스크립트] 정적 프로퍼티, 메서드 (0) | 2021.02.07 |
| [자바스크립트] 생성자 함수 (0) | 2021.02.05 |
| [자바스크립트] this (0) | 2021.02.05 |