Language/JavaScript

[Class] 클래스 정의와 원리

싯벨트 2022. 12. 16. 06:41
728x90

#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) 적용됨

 

참고자료

댓글수0