모던 자바스크립트: ES6 클래스 이해

Source: Dev.to

생성자 함수란?

동일한 구조를 가진 여러 객체를 만들어야 할 때가 많습니다. 객체를 반복해서 작성하는 대신, JavaScript는 생성자 함수를 제공하여 객체 생성을 더 쉽고 재사용 가능하게 합니다.

설명

function Person() {          // 생성자 함수 (관례적으로 첫 글자를 대문자로)
  this.name = ...;           // 객체의 속성
  this.age = ...;            // 또 다른 속성
  // 아직 객체가 생성된 것은 아니며, 함수는 객체가 어떻게 만들어져야 하는지 정의만 합니다
}

new를 사용하면 무슨 일이 일어날까?

1. Step 1 — 빈 객체 생성
   

2. Step 2 — this가 객체를 가리킴
   

3. Step 3 — 속성 추가
   

4. Step 4 — 객체 반환
   

이 단계들을 거친 뒤에 새로 만든 객체가 반환됩니다:

생성자 함수에서 this의 역할

생성자 함수 안에서 키워드 this는 새로 생성되는 객체를 가리킵니다. new와 함께 함수를 호출하면 JavaScript는 자동으로:

1. 빈 객체를 만든다.
2. 생성자 내부의 this를 그 객체에 바인딩한다.
3. 생성자 본문을 실행해 this에 속성을 추가한다.
4. 그 객체를 반환한다.

현대적인 대안 — ES6 클래스

ECMAScript 2015(ES6)에서 도입된 클래스는 객체를 만들기 위한 더 깔끔하고 가독성 좋은 문법을 제공합니다. ES6 이전에는 개발자들이 생성자 함수에 의존했지만, 이제 클래스는 동일한 기능을 더 명확한 의미론으로 캡슐화합니다.

간단한 예시