[Class] 클래스 정의와 원리

#Class 정의

여러 개의 객체를 만드는 데 유용하며, new 연산자를 사용하여 class 에 정의된 생성자 함수와 속성, 메서드를 포함한 객체(인스턴스)를 생성한다.

• constructor() 생성자 메서드는 어떤 메서드들 보다 먼저 호출되고, new 연산자를 사용할 때 자동으로 호출된다. 
  • 객체를 생성하고 초기화하기 위한 특수 메서드 (class 내부 유일해야 함)
  • 부모클래스의 constructor를 호출하려면 구현부에 super 키워드 사용
• constructor(param){this.param = param} 을 통해 클래스를 가르키는 this. 연산자를 통해 속성을 초기화 및 할당한다. 
• constructor() 에 들어간 매개변수의 개수가 new 연산자를 통해 생성하는 클래스 인스턴스에 들어가는 매개변수와 동일하다
  • ex. User클래서의 생성자 함수가 constructor(name){this.name = name} 인 경우 
    const aUser = new User('fullName') 처럼 매개변수 동일하게 1개 입력 

정의하는 두 가지 방법

1. Class 선언

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

2. Class 표현식

let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

#Class 원리

클래스 문법으로 선언을 한다는 것(class User { })은 다음 프로세스로 이루어진다.

1. User라는 이름을 가진 함수 생성

2. 함수 본문은 생성자 메서스 constructor에서 가져오고, 없는 경우는 본문이 빈 함수 생성됨

3. sayHi 와 같은 클래스 내부에 정의한 메서드는  User.prototype에 저장

클래스와 함수의 차이

• class로 만든 함수는 내부 프로퍼티 [[IsClassConstructor]]: true 가 붙는다
• 함수 타입이지만 단독으로 호출이 불가하다. 
• 클래스에 정의된 메서드는 열거할 수 없다.(non-enumerable)
  • for in 문에서 객체 순회 시, 메서드는 건너뛰고 싶은 경우에 유용함.
• 클래스 생성자 내부 코드는 자동으로 엄격모드(use strict) 적용됨

 

참고자료

• MDN classes https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
• MDN Constructor https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
• 코어 자바스크립트 <클래스와 기본 문법> https://ko.javascript.info/class
• https://think0wise.tistory.com/27