🌷 프로토타입 체인
: 객체지향 프로그래밍의 특성 중 상속을 javascript에서 구현할 때 사용하는 방법
🤔 어떻게 사용할까 ?
-
클래스 상속 ➡️ 해당 클래스를 다른 클래스로 확장할 수 있음
-
constructor 생성자 함수
-
ES6 문법에서는 "extends" 와 "super" 키워드를 알아두기
🌷 constructor 생성자 함수
: 클래스의 인스턴스 객체를 생성하고, 초기화하는 특별한 메서드
- 인스턴스 객체를 초기화 할 때 사용한다.
- 클래스에 오직 하나만 존재할 수 있다.
- 부모 클래스가 있고, 자식 클래스가 생성자 함수를 작성하지 않았다면 부모 생성자를 부른다.
➡️ 두 개 이상의 constructor 메서드를 정의하면 SyntaxError 가 발생한다. - 클래스에 생성자를 따로 정의하지 않는 경우, 기본 생성자를 사용한다.
➡️ 기본 생성자 : 빈 메서드
constructor () { 빈 메서드 }- 다른 클래스를 상속하는 경우
➡️ 기본 생성자는 자신의 매개변수를 부모 클래스의 생성자로 전달한다.
📌 여기서 알고 가야할 점 !
➡️ 파생 클래스에 직접 생성자를 정의 할 경우 !
ex > this.age = 15
: 부모 클래스의 생성자를 호출하려면 직접 super()를 호출해야 한다.
🌷 super ( )
- 파생 클래스에서, this를 사용하기 전에는 반드시 super()를 먼저 호출해야 한다.
➡️ 그렇지 않으면 ReferenceError 가 발생 - 생성자 함수 내에서 쓰일때는, super 키워드는 한번만 사용한다.
- 생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출한다.
🌷 extends 키워드
: 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용된다.
-
먼저 Animal이라는 클래스를 생성
➡️ 생성자함수 constructor() 사용
-
extend 키워드를 사용하여 Animal 클래스 자식으로 Rabbit 클래스 생성
➡️ Animal을 상속받음
- 해당 Rabbit 클래스를 이용하여 rabbit 인스턴스 생성 ( 상속완료 )
✓ 아래 그림구조 알아두기
어제배운 내용으로 과정을 요약해보면
①. 생성자 함수(constructor) 의 객체 생성
❍ class Animal
➡️ 생성자 함수의 prototype 객체 생성 ( Animal.prototype )
➡️ ( Animal ) prototype 프로퍼티를 ( Animal.prototype )생성자 함수의 prototype 객체 링크에 연결
➡️ 생성자 함수의 prototype 객체의 constructor 와 객체의 prototype 링크 연결
②. extend 키워드를 사용하여 Animal 클래스를 확장 ( Rabbit )
class Rabbit extends Animal
let rabbit = new Rabbit("흰 토끼");➡️ 자바스크립트가 내부적으로 Rabbit의 __proto__ 프로퍼티에 Animal 생성자 함수의 prototype 과 링크 연결
➡️ extends는 프로토타입을 기반으로 동작
🤔 Animal 클래스에서 선언한 메서드 run을 rabbit 객체에서도 똑같이 사용할 수 있는 이유?
➡️ extends는 Rabbit.__proto__을 Animal.prototype으로 설정합니다
➡️ 그렇기 때문에 Rabbit.prototype에서 메서드를 찾지 못하면 Animal.prototype에서 메서드를 가져옵니다.
✚ Animalprototype 에도 없다면 ?
: 계속 상위 부모로 올라가서 찾아 !
➡️ 🔮 프로토타입 체인
📌 코드 참조 : 클래스 상속
