프로토타입 체인

자바스크립트에서 상속을 구현하기 위해서 프로토타입 체인을 사용한다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#ecmascript_2015_%ED%81%B4%EB%9E%98%EC%8A%A4

class 구문

Class: 블록 내에서 속성, 메서드, 모든 기능을 정의한다.
constructor: class의 생성자
method: 생성자 뒤에 작성한다.

class 예시: Person

class Person {
  constructor(first, last, age, gender, interests){
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }
  greeting() {
    console.log(`Hi, I'm ${this.name.first}`);
  };
  farewell() {
    console.log(`${this.name.first} bye!`);
  };
}

class 상속 예시

super() 연산자를 정의하면 상위 클래스의 멤버를 상속받는다.
super()는 this.subject 앞에 와야한다. 레퍼런스 에러 나옴!

class Students extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
    this.subject = subject;
    this.grade = grade;
  }
}

상속 클래스로 인스턴스 생성하기 예시

let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
snape.greeting(); //Hi, I'm Severus
snape.farewell(); //Severus bye!
snape.age; //58
snape.subject; //Dark arts

DOM과 프로토타입

브라우저에서 돔을 이용하면 document.createElement('div') 로 새로운 div 엘리먼트를 만들 수 있다. 이렇게 생성된 div는 HTMLDivElement라는 클래스의 인스턴스이다.

EventTarge > Node > Element > HTMLElement > HTMLDivElement

__proto__를 사용해 부모 클래스의 프로토타입을 찾을 수 있다.

이벤트타겟 이후는 뭐가 나오나 쳐봤으나 별다른 것을 얻을 수는 없었다...
-> Object.prototype임
여기서 더 치면 null값이 나온다!!

prototype에 접근하는 주체에 따라 .prototype / ._proto_ 로 나뉜다.

Human - .prototype -> Human.prototype <- ._proto_ - kimcoding

클래스에서 접근시: .prototype
객체에서 접근시: ._proto_