2021.02.26(금) TIL - Prototype Chain

1. <proto, constructor, prototype>

JavaScript에서 OOP를 하기위해서는 반드시 proto, constructor, 그리고 prototype과 서로간의 관계를 알아야 한다. proto는 쉽게 설명하자면 해당 객체의 연결고리 역할을 한다. 그러므로 instance 를 이용해 proto를 조회하는건 객채의 prototype을 찾는거와 비슷하다. constructor는 class가 instance를 만들때 제일 먼저 실행되는 생성자이다. 한마디로 어떠한 class가 만들어졌을때 그 class에 대한 틀을 만드는 역할이라고 할 수 있겠다. prototype은 constructor로 실행하기 위한 원형이라고 볼수있다. constructor 를 통해 받은 정보를 기준으로 청사진(blueprint)를 만들 수 있다.

2. <ES6 class 키워드 / Super 키워드>

ES6 class 키워드

JavaScript는 prototype 기반의 언어로 사용을 하다가 ES6 문법이 도입되면서 class 라는 키워드를 통해 코드를 더 간결하게 짤수있게 되었다(해다정보는 OOP 글을 통해 참조)

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = 'Square';
  }
}

Super 키워드

이전의 JavaScript는 지금의 부모 class와 자식 class간의 메소드를 사용하기위해서는 prototype을 통해 조회를 하여 사용되었다. ES6 문법이 도입되면서 흐름은 비슷하지만 super 라는 키워드를 통해 더 쉽고 간결하게 메소드를 조회할 수 있게되었다.

class Person extends Boy {
      play() {
        super.play();
        console.log('때로는 마음놓고 놀자.');
      }
    
      learn() {
        console.log(this.name + '은 롤을 하며 놀고있습니다.');
      }
    }