JS Deep Dive - 25. 클래스

클래스는 새로운 객체 생성 매커니즘으로 볼 수 있다.

 

25.2 클래스 정의

클래스는 class 키워드를 사용하여 정의한다.

 

클래스는 일급 객체로 다음과 같은 특징을 가진다.

 

클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세가지가 있다.

- constructor는 인스턴트를 생성하고 초기화하기 위한 특수 메서드로, 이름을 변경할 수 없음.

- constructor는 클래스 내에 최대 한개만 존재할 수 있음.(생략 가능하며 생략하면 암묵적으로 정의됨)

-constructor 내부에서는 return문을 반드시 생략해야 한다.

클래스에서는 메서드에 static 키워드를 붙이면 정적 메서드(클래스 메서드)가 된다.

클래스는 클래스 정의가 평가되는 시점에 함수 객체가 되므로 인스턴스와 달리 별다른 생성 과정이 필요 없다. 따라서 정적 메서드는 클래스 정의 이후 인스턴스를 생성하지 않아도 호출할 수 있다.

정적 메서드는 인스턴스로 호출할 수 없다.

정적 메서드가 바인딩된 클래스는 인스턴스의 프로토타입 체인 상에 존재하지 않기 때문이다.

다시말해, 인스턴스의 프로토 타입 체인상에는 클래스가 존재하지 않기 때문에 인스턴스로 클래스의 메서드를 상속받을 수 없다.

 

정적 메서드 vs 프로토타입 메서드

위 예제에서 정적 메서드 area는 2개의 인수를 전달받아 면적을 계산한다.

이때 정적 메서드 area는 인스턴스 프로퍼티를 참조하지 않는다.

만약 인스턴스 프로퍼티를 참조(this 사용)해야 한다면 정적 메서드 대신 프로토타입 메서드를 사용해야 한다.

반대로, this를 사용하지 않을거라면 정적 메서드로 정의하는 것이 좋다.

정적 메서드는 클래스로 호출해야 하므로 정적 메서드 내부의 this는 인스턴스가 아닌 클래스를 가리킨다.

즉, 프로토타입 메서드와 정적 메서드내부의 this 바인딩이 다르다.

25.6 클래스의 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩

new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객쳬가 생성된다. 이 빈 객쳬가 바로(아직 완성되지는 않았지만)클래스가 생성한 인스턴스다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 따라서 constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킨다.

2. 인스턴스 초기화

constructor의내부코드가실행되어this에바인딩되어있는인스턴스를초기화한다. 즉, this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 값을 초기화한다. 만약 constructor가 생략되었다면 이 과정도 생략된다.

(ES6의 클래스는 다른 객체지향언어처럼 private, public, protected 키워드와 같은 접근제한자를 지원하지 않는다. 따라서 인스턴스프로퍼티는 언제나 public하다.)

(-> 21년 이후 private 필드를 정의할 수 있게 됨. private 필드의 선두에는 #을 붙여줌. #name)

3. 인스턴스 반환

클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

 

25.8 상속에 의한 클래스 확장

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장extends하여 정의하는 것이다.

(클래스와 생성자 함수는 인스턴스를 생성할수 있는 함수라는 점에서 매우 유사하다. 하지만 클래스는 상속을 통해 기존 클래스를 확장할수 있는 문법이 기본적으로 제공되지만 생성자 함수는 그렇지 않다.)

 

상속에 의해 확장된 클래스 Bird를 통해 생성된 인스턴스의 프로토타입 체인은 다음과 같다.