자바스크립트 object 내용 복습2 (2021-02-25)

Udemy에서 ZTM 강의를 통해 React 를 사용한 앱 만들기 까지 맛보았으나 조금 더 JS에 대한 대한 깊은이해와 정리가 필요하다고 느껴져서 React 공식문서나 MDN 문서등을 보며 공부한 내용을 정리하려 합니다.

---

오브젝트 프로토타입(링크)

자바스크립트는 프로토타입기반 언어로 묘사되는데 그것은 오브젝트(객채)가 메소드와 속성(properties)를 상속받을 수 있는 템플렛 기능을 하는 prototype 오브젝트를 가질수 있다는 의미이다. 

또한 객체의 프로토타입 객체 또한 프로토타입 객체를 지닐수 있다. 이렇게 쭉이어지는것을 prototype chain이라 한다.  

프로토타입으로 상속이 계속 이루어진다....

객체에 상속되는 속성은 prototype으로 정의된 것들이다. 

문자열을 만들고 . 으로 접근하면 수많은 활용가능한 메소드가 나오는 것도 프로토타입 상속을 통해 가능한 것이다. 

문자열을 만들고 . 으로 접근하면 보이는 수많은 메소드들

프로토타입을 이용하여 상속을 구현하는법(링크)

ES2015 클래스(링크)

class를 이용한 문법도 사실상 내부적으로는 프로토타입 상속이 일어나는 것임. class 이용문법은 일종의 syntactic sugar 인것.

아래와 같은 형태로 훨씬 간결하게 클래스를 작성이 가능하다. 

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} has left the building. Bye for now!`);
  };
}

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);

    // subject and grade are specific to Teacher
    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 has left the building. Bye for now.
snape.age // 58
snape.subject; // Dark arts