[TIL] Day23
[SEB FE] Day23
☑️ 프로토타입 체인
객체의 property나 메소드 접근시,
만약 현재 객체의 property가 존재하지 않는다면,
__proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 property나 메소드를 차례로 검색하는 것
👉 프로토타입 체인을 사용하여‘상속'구현
➰ 상속
- 부모 클래스: 속성과 메서드를 물려주는 클래스
- 자식 클래스: 속성과 메서드를 물려받는 클래스
✋ JS에서 상속은extends와super키워드를 이용해서 구현 가능
➰
프로토타입은 상속을 위한 매커니즘
➰프로토타입 체인은 상속을 위해 존재하는 것
📎 생성자 함수
- 클래스 내에서 생성자 함수(
constructor)는 하나만 존재 가능- 생성자 함수: 인스턴스 객체를 생성하고 초기화하는 특별한 메서드
- 생성자 함수를 작성하지 않으면, 기본 생성자(default) 제공
- 기본(base) 클래스일 경우엔 기본 생성자는 비어있음
- 파생(derived) 클래스일 경우 기본 생성자는 부모 생성자를 부름
✋ EventTarget의 prototype에 addEventListener 메서드 존재
👉 div는 HTMLDivElement의 인스턴스이며, EventTarget을 상속 받기 때문에 addEventListener 사용 가능
☑️ extends & super
super키워드: 부모 클래스의 함수를 호출할 때 사용constructor(생성자 함수) 내에서 쓰일 땐super키워드는 한번만 사용 가능하며, 부모 클래스의 생성자 함수를 호출super키워드는this키워드 사용 전에 사용되어야 하며, 그렇지 않을 경우Reference Error
class B extends A {
constructor(habit, city) {
// class A의 color, food 속성 상속받음
// super는 this 이전에 사용해야 한다.
super(habit, city);
this.age = 10;
this.color = 'pink';
this.foods = [];
}
addFood(food) {
this.foods.push(food);
}
}
// But, 위의 속성 정의는 여러 번 재사용하거나 상속할 때 비효율적인 정의 형태
----------
class C {
// 매개변수에 초기값을 설정
constructor(age = 10, color = 'pink', food = 'banana') {
// 속성 정의
this.age = age;
this.color = color;
this.food = food;
}
eat() {
return 'Yammy' + this.food;
}
}
__proto__를 이용하면 부모 클래스의 프로토타입이나 ‘부모의 부모 클래스'의 프로토타입 탐색 가능
⇒ 상속 관계 확인 가능
div.__proto__를 시작으로__proto__를 하나씩 증가시키면
HTMLDivElement→HTMLElement→Element→Node→EventTarget→Object(모든 클래스의 조상)
✋ 화살표 방향은 부모를 가리킴
✋Object의 부모는 없으므로null이 나오며, 한 번 더__proto__를 써주면 아예error발생
FE developer