이론/JS

[JS] class 선언문 - 이론

millfeel1298 2021. 2. 12. 02:53

문법

class ClassName{
  constructor(){ ... }
  method1(){ ... }
  method2(){ ... }
  method3(){ ... }
}

let test = new ClassName();

- class 선언을 통해서 class를 만든다.

- new와 함께 className()을 호출하지 않으면 에러가 발생한다.

- class는 함수다.

- 객체의 기본 상태를 설정해주는 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화 할 수 있다.

- class가 호출되면, 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

- method 사이에 쉼표를 사용하지 않는다.

 

[예시]

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name + '님 안녕하세요');
  }
  sayName() {
    alert(this.name);
  }
}

let user = new User("John");
user.sayHi();

new User("John")를 호출하면 다음과 같은 일이 일어난다.

  1. 새로운 객체 생성
  2. 넘겨받은 인수와 함께 constructor가 자동으로 실행
  3. this.name에 인수 "John"이 할당

Q. class 선언과 함수 선언의 차이점은?

01. class는 호이스팅 되지 않는다.

함수 선언은 호이스팅 되지만, 클래스 선언은 그렇지 않다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야 한다.

 

[예제]

// 함수의 경우
// 호이스팅 됐기 때문에 함수보다 호출을 먼저해도 에러가 나지 않는다.
funName();
function funName() {console.log('함수 출력');}

// class의 경우
// 호이스팅이 되지 않기 때문에 에러가 난다.
new className();
class className{constructor(){console.log('class 출력');}}

*호이스팅이란? 모든 선언(var, let, const, function 등)을 가장 위로 끌어올리는 현상

 

02. class로 만든 함수엔 특수 내부 프로퍼티인 [[FunctionKind]]:"classConstructor"가 이름표처럼 붙는다.

JS는 다양한 방법을 사용해 함수에 [[FunctionKind]]:"classConstructor"가 있는지를 확인한다.

이런 검증 과정이 있기 때문에 클래스 생성자를 new와 함께 호출하지 않으면 아래와 같이 에러가 발생한다.

 

03. class 메서드는 열거할 수 없다(non-enumerable).

클래스의 prototype 프로퍼티에 추가된 메서드 전체의 enumerable 플래그는 false이다.

for..in으로 객체를 순회할 때, 메서드는 순회 대상에서 제외하고자 하는 경우가 많으므로 이 특징은 꽤 유용하다.

 

04. class는 항상 엄격 모드로 실행된다(use strict).

클래스 생성자 안 코드 전체엔 자동으로 엄격 모드가 적용된다.

 


[공부 좌표]

Class 선언

class - 강의

 

[기본 지식]

객체 순환 fon...in / 배열 순환 for...of

데이터 프로퍼티(data property) 플래그 - writable, enumerable, configurable

class 표현식

 

[이어서 학습]

클래스 상속 extends

class - super