프로토타입(2)

◎프로토타입 체인

: 상속 구현시 사용
-부모클래스: 속성과 메서드를 물려주는 클래스
-자식클래스: 속성과 메서드를 물려받는 클래스
ex)

let kimcoding = new Human(‘김코딩’, 30); //부모
Let kimnayul= new Student(‘김나율’, 24);  //자식

• 클래스 문법으로 상속(하위클래스 생성)
  -extends: 상속받은 클래스 명시
  Ex) Student extends Human
  -super: construtor()에서 첫번재로 정의.
  상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드
  Ex)

class Human{
constructor(age, gender, job){
  this.age=age;
  this.gender=gender;
  this.job=job;
}
class Student extends Human{  //Human에서 상속받음
constructor(age, gender,job){
  super(age, gender)  //상위 클래스의 멤버를 상속받기 가능
  this.job=student;
  }
  
  let kimcoding = new Human(‘김코딩’, 30);
  Let kimnayul=new Student(‘김나율’, 24);
  

• DOM과 프로토타입
  : Document.createElement(‘div’)로 새로운 div엘리먼트 만들기 가능
  => HTMLDivElement라는 클래스의 인스턴스

  • div엘리먼트의 상속 관계
    EventTarget <= Node <= Element <= HTMLelement <= HTMLDivElement
    -화살표 방향은 부모를 가리킨다, EventTarget의 부모로는 모든 클래스 의 조상인 Object가 존재
    -__proto_를 이용하면 '부모클래스의 프로토타입', '부모의 부모 클래스의 프로토타입' 탐색 가능

    let div = document.createElement('div');
    div.__proto__ //HTMLDivElement
    div.__proto__.__proto__ //HTMLelement
    div.__proto__.__proto__.__proto__ //
    div.__proto__.__proto__.__proto__.__proto__ //Element
    div.__proto__.__proto__.__proto__.__proto__.__proto__ //Node
    div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ //EventTarget
    div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ //object

• 정적 메서드
  : 개별 인스턴스에서 사용할 수 없지만 클래스에서 직접 호출할 수 있는 메서드

  class Human{
  constructor(){
  ...
  }
  static generateName(){// 정적 메서드
  const randomNumber=Math.floor(Math.random()
  }
  const na=new Human('nayul');
  na.generateName(); //불가능

  => 인스턴스에서 정적메서드 호출 불가능