SEB_18_프로토타입_체인

프로토타입 체인, .prototype, .__proto__, Object, extends,super

 

자바스크립트는 프로토타입 기반 언어다. 이 자바스크립트에 상속을 부여하기 위해 사용되는건 프로토타입 체인이다.

프로토타입 체인은 부모클래스의 속성과 메소드를 자식클래스에게 부여하면서 자식클래스는 딱시 명시하지 않아도 상속받은 부모클래스의 속성과 메소드를 사용할 수 있다.

2022.07.22 - [SEB_FE] - SEB_17_프로토타입과_클래스

SEB_17_프로토타입과_클래스

여기서 작성했듯 프로토타입을 작성하면 그 속성을 자식이 가지고 있지 않아도 부모클래스에서 찾아낸 뒤 사용할 수 있다.

자바스크립트에서 ES6에서 나온 클래스문법을 사용해서 구현해보자면

 

1. 부모클래스 없다면 만들고

// 부모클래스
class Tomato{
  constructor(name, color){
    this.name = name
    this.color = color
  };

  greeting(){
    console.log(`Hi ${this.name}`);
  };
}

2. 자식클래스(인스턴스)를 만드는데

// 자식클래스
class AwesomeTomato extends Tomato{
  constructor(name, color, accessory){
    super(name,color);

    this.accessory = accessory;
  }
}

➡️ 자식 클래스 extends 부모클래스 사용하면 어디서 상속을 받을 것인지 명시하고, 상속받을 자식클래스를 만들 수 있다.

➡️ 자식클래스의 constructor()에 처음에 super()연산자를 정의 하면 코드를 읽기 쉬워진다. super 키워드는 부모객체의 함수를 호출할때 사용한다.

 

이번에는 DOM에서 프로토타입을 알아보자

먼저 DOM에서 div요소를 만든다음 부모클래스의 프로토타입을 알수 있는 .__proto__를 사용해 어떤걸 상속 받았는지 알아보았다.

EventTarget의 부모는 Object가 있다.

그리고 그 위에도 해봤는데 null이 나왔다. > 가장 위에 있는 부모클래스는 Object인가보다!!

나온 결과로 부모.prototype === 자식.__proto__ 임을 알아두자

부모

Object

EventTarget

Node

Element

HTMLElement

HTMLDivElement

자식

위의 표는 DOM에서 div를 만들떼의 프로토타입 체인이다.