제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.
25장 클래스
25.1 클래스는 프로토타입의 문법적 설탕인가?
- 자바스크립트는 프로토타입 기반 객체지향 언어이므로, 클래스가 필요 없는(class free) 객체지향 프로그래밍 언어다. 그래서 ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있었다.
// ES5 생성자 함수
var Person = (function () {
// 생성자 함수
function Person(name) {
this.name = name
}
// 프로토타입 메서드
Person.prototype.sayHi = function () {
console.log("Hi! My name is " + this.name)
}
// 생성자 함수 반환
return Person
})()
// 인스턴스 생성
var me = new Person("Lee")
me.sayHi()
- ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그램이 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다.
- 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있다.
클래스와 생성자 함수의 차이점
- 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.
- 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다.
- 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
- 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다. 하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
- 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. (열거 되지 않는다.)
- 생성자 함수와 클래스틑 프로토타입 기반 객체지향을 구현했다는 점에서 매우 유사하지만, 클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다.
- 따라서 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 새로운 객체 생성 메커니즘으로 보는 것이 좀 더 합당하다.
25.2 클래스 정의
- 클래스는 class 키워드를 사용하여 정의한다.
- 클래스 이름은 생성자 함수처럼 파스칼 케이스를 사용하는 것이 일반적이다.
- 표현식으로 클래스를 정의할 수도 있다.(이름을 가질 수도 갖지 않을수도 있다.)
- 클래스가 값으로 사용할 수 있는 일급 객체임을 의미한다.
- 클래스 몸체에는 0개 이상의 메서드만 정의할 수 있다.
- 메서드에는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세 가지가 있다.
// 클래스 선언문
class Person {
// 생성자
constructor(name) {
this.name = name
}
// 프로토타입 메서드
sayHi() {
console.log(`Hi! My name is ${this.name}`)
}
// 정적 메서드
static sayHello() {
console.log("Hello!")
}
}
// 인스턴스 생성
const me = new Person("Seo")
// 인스턴스의 프로퍼티 참조
console.log(me.name)
// 프로토타입 메서드 호출
me.sayHi()
// 정적 메서드 호출
Person.sayHello()
- 생성자 함수와 클래스의 정의 방식 비교 (p420 참조)
25.3 클래스 호이스팅
-
클래스는 함수로 평가된다.
-
클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수 객체를 생성한다.
-
이때 클래스가 평가되어 생성된 함수 객체는 constructor다. 따라서 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
-
프로토타입과 생성자 함수는 언제나 쌍으로 존재한다.
-
클래스 선언문도 호이스팅이 발생하며, let, const 키워드로 선언한 변수처럼 호이스팅 된다. (TDZ)
25.4 인스턴스 생성
- 클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다.
- 함수는 new 연산자의 사용 여부에 따라 일반 함수 혹은 생성자 함수로 호출되지만, 클래스는 반드시 new 연산자와 함께 호출해야 한다.
- 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가능하다.
25.5 메서드
- 클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다.
- constructor(생성자)
- 프로토타입 메서드
- 정적 메서드
클래스 정의에 대한 새로운 제안 사양
- ECMAScript 사양 에 따르면 인스턴스 프로퍼티는 반드시 constructor 내부에서 정의해야 한다.
- 하지만 2021년 1월 기준으로 클래스 몸체에 메서드뿐 아니라 프로퍼티도 정의할 수 있게 될 것으로 보인다.
25.5.1 constructor
- constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다.
- constructor는 이름을 변경할 수 없다.
class Person {
// 생성자
constructor(name) {
// 인스턴스 생성 및 초기화
this.name = name
}
}
- 클래스는 평가되어 함수 객체가 되고, 함수 객체의 고유 프로퍼티를 모두 가진다.
- 프로토타입과 연결되어 있어 자신의 스코프 체인을 구성한다.
- 모든 함수 객체가 갖고 있는 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor 프로퍼티는 클래스 자신을 가리키고 있다.
- 즉, 생성자 함수라는 것을 의미한다.
- Person 클래스의 constructor 내부에서 this에 추가한 프로퍼티는 인스턴스 프로퍼티가 된다. (생성자 함수와 동일)
- 클래스가 평가되어 생성된 함수 객체나 클래스가 생성한 인스턴스 어디에도 constructor 메서드가 보이지 않는데, 이는 클래스 몸체에 정의한 constructor가 단순한 메서드가 아니라는 것을 의미한다.
- constructor는 메서드로 해석되는 것이 아니라 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다.
- 클래스 정의가 평가되면 constructor의 기술된 동작을 하는 함수 객체가 생성된다.
클래스의 constructor 메서드와 프로토타입의 constructor 프로퍼티
-
클래스의 constructor 메서드와 프로토타입의 constructor 프로퍼티는 이름이 같아 혼동하기 쉽지만, 직접적인 관련이 없다.
-
프로토타입의 constructor 프로퍼티는 모든 프로토타입이 가지고 있는 프로퍼티로, 생성자 함수를 가리킨다.
-
constructor는 생성자 함수와 유사하지만 몇가지 차이가 있다.
- constructor는 클래스 내에 최대 한 개만 존재할 수 있다.
- constructor는 생략할 수 있다.
- constructor를 생략하면 클래스에 다음과 같이 빈 constructor가 암묵적으로 정의된다. (생략한 경우 빈 constructor에 빈 객체를 생성한다.)
- 프로퍼티가 추가되어 초기화된 인스턴스를 생성하려면 constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다.
- 인스턴스를 생성할 때 클래스 외부에서 인스턴스 프로퍼티의 초기값을 전달하려면 다음과 같이 constructor에 매개변수를 선언하고 인스턴스를 생성할 때 초기값을 전달한다.(초기값은 constructor의 매개변수에게 전달된다.)
- constructor 내에서는 인스턴스의 생성과 동시에 인스턴스 프로퍼티 추가를 통해 인스턴스 초기화를 실행하므로, 초기화를 위해선 constructor를 생략해는 안된다.
- constructor은 별도의 반환문을 갖지 않아야 한다. (생성자 함수와 동일)
25.5.2 프로토타입 메서드
- 생성자 함수를 사용하여 인스턴스를 생성하는 경우 프로토타입 메서드를 생성하기 위해 다음과 같이 명시적으로 프로토타입에 메서드를 추가해야 한다.
// 생성자 함수
function Person(name) {
this.name = name
}
Person.prototype.sayHi = function () {
console.log(`Hi! My name is ${this.name}`)
}
const me = new Person("Seo")
me.sayHi()
- 클래스 몸체에서 정의한 메서드는 생성자 함수에 의한 객체 생성 방식과 달리 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.
class Person {
// 생성자
constructor(name) {
// 인스턴스 생성 및 초기화
this.name = name
}
// 프로토타입 메서드
sayHi() {
console.log(`Hi! My name is ${this.name}`)
}
}
const me = new Person("Seo")
me.sayHi()
- 클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 된다.
- 클래스 몸체에서 정의한 메서드는 인스턴스의 프로토타입에 존재하는 프로토타입 메서드가 되어, 인스턴스는 프로토타입 메서드를 상속받아 사용할 수 있다.
- 즉, 클래스는 생성자 함수와 같이 인스턴스를 생성하는 생성자 함수라고 볼 수 있다.
- 클래스는 생성자 함수와 마찬가지로 프로토타입 기반의 객체 생성 메커니즘이다.
25.5.3 정적 메서드
- 정적 메서드란, 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다.
- 생성자 함수에서 정적 메서드를 생성하기 위해서는 명시적으로 생성자 함수에 메서드를 추가해야 한다.
// 생성자 함수
function Person(name) {
this.name = name
}
Person.sayHi = function () {
console.log("hi!")
}
// 정적 메서드 호출
Person.sayHi()
- 클래스에서는 메서드에 static 키워드를 붙이면 정적 메서드(클래스 메서드)가 된다.
class Person {
// 생성자
constructor(name) {
// 인스턴스 생성 및 초기화
this.name = name
}
// 정적 메서드
static sayHi() {
console.log("hi!")
}
}
- 정적 메서드는 클래스에 바인딩된 메서드가 되며, 클래스는 함수 객체로 평가되어 자신의 프로퍼티/메서드를 소유할 수 있다.
- 클래스는 클래스 정의가 평가되는 시점에 함수 객체가 되므로 인스턴스와 달리 별다른 생성 과정이 필요 없다.(정적 메서드는 클래스 정의 이후 인스턴스 생성하지 않아도 호출할 수 있다.)
- 정적 메서드는 클래스로 호출하며, 인스턴스로 호출할 수 없다.
- 정적 메서드가 바인딩된 클래스는 인스턴스의 프로토타입 체인 상에 존재하기 않기 때문이다.
- 인스턴스의 프로토타입 체인 상에는 클래스가 존재하지 않기 때문에 인스턴스로 클래스의 메서드를 상속받을 수 없다.
25.5.4 정적 메서드와 프로토타입 메서드의 차이
- 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다.
- 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출한다.
- 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만, 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.
- 프로토타입 메서드는 인스턴스로 호출해야 하므로 프로토타입 메서드 내부의 this는 프로토타입 메서드를 호출한 인스턴스를 가리킨다.
- 정적 메서드는 클래스로 호출해야 하므로 정적 메서드 내부의 this는 인스턴스가 아닌 클래스를 가리킨다. (this 바인딩이 다르다!)
- 메서드 내부에서 인스턴스 프로퍼티를 참조할 필요가 있다면 this를 사용하고, 프로토타입 메서드로 정의해야 한다.
- 메서드 내부에서 this를 사용하지 않아도 프로토타입 메서드로 정의할 수는 있지만, 인스턴스를 생성한 다음 인스턴스로 호출해야 하므로, this를 사용하지 않는 정적 메서드로 정의하는 것이 좋다.
- 표준 빌트인 객체인 Math, Number, JSON, Object, Reflect는 다양한 정적 메서드를 갖고 있고, 그 정적 메서드들은 애플리케이션 전역에서 사용할 유틸리티 함수다.
- 클래스 또는 생성자 함수를 하나의 네임스페이스로 사용하여 정적 메서드를 모아 놓으면 이름 충돌 가능성을 줄여 주고 관련 함수들을 구조화할 수 있는 효과가 있다.
- 정적 메서드는 애플리케이션 전역에서 사용할 유틸리티 함수를 전역 함수로 정의하지 않고 메서드로 구조화할 때 유용하다.
25.5.5 클래스에서 정의한 메서드 특징
- function 키워드를 생략한 메서드 축약 표현을 사용한다.
- 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요없다.
- 암묵적으로 strict mode로 실행된다.
- for…in 문이나 Object.keys 메서드 등으로 열거할 수 없다. 즉, 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false다.
- 내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. (new 연산자와 호출할 수 없다.)
25.6 클래스의 인스턴스 생성 과정
- 클래스는 new 연산자 없이 호출할 수 없다.
- 생성자 함수의 인스턴스 생성 과정과 유사한 과정을 거쳐 인스턴스가 생성된다.
1. 인스턴스 생성과 this 바인딩
- new 연산자와 함께 클래스를 호출하면 cosntructor 함수 내부 코드가 실행되기에 앞서 빈 객체가 생성된다. ( 이 빈 객체가 바로 클래스가 생성한 인스턴스다.)
- 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다.
- 인스턴스는 this에 바인딩되어, constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킨다.
2. 인스턴스 초기화
- constructor 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다.
- this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스 프로퍼티값을 초기화한다.
- constructor 생략시 이 과정도 생략된다.
3. 인스턴스 반환
- 바인딩된 this가 암묵적으로 반환된다.
class Person {
//생성자
constructor(name) {
// 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
console.log(this) // Person {}
console.log(Object.getPrototypeOf(this) === Person.prototype) // true
// 2. this에 바인딩 되어 있는 인스턴스를 초기화한다.
this.name = name
// 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
}
}
25.7 프로퍼티
25.7.1 인스턴스 프로퍼티
- 인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다.
- constructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 된다.
- ES6 클래스는 접근 제한자(access modifier)를 지원하지 않아 항상 public하지만 private한 프로퍼티를 정의할 수 있는 사양이 현재 제안 중에 있다.
25.7.2 접근자 프로퍼티
- 접근자 프로퍼티(access property)는 자체적으로 값([[Value]]-내부슬롯)을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수(access function)로 구성된 프로퍼티다.
- gettr 함수, setter 함수
- getter는 인스턴스 프로퍼티에 접근할 때마다 프로퍼티 값을 조작하거나 별도의 행위가 필요할 때 사용한다.
- 메서드 이름 앞에 get 키워드를 사용해 정의한다.
- getter는 호출하는 것이 아니라 프토퍼리처럼 참조하는 형식으로 사용하며, 참조 시 내부적으로 gette가 호출된다.
- getter는 반드시 무언가를 반환해야 한다.
- setter는 인스턴스 프로퍼티에 값을 할당할 때마다 프로퍼티 값을 조작하거나 별도의 행위가 필요할 때 사용한다.
- 메서드 이름 앞에 set 키워드를 사용해 정의한다.
- setter는 호출하는 것이 아니라 프로퍼티처럼 값을 할당하는 형식으로 사용하며, 할당 시에 내부적으로 setter가 호출된다.
- setter는 무언가를 프로퍼티에 할당해야 하므로 매개변수가 있어야 한다. (단 하나의 값만 할당받으므로 하나의 매개변수만 선언할 수 있다.)
- 클래스의 접근자 프로퍼티 역시 인스턴스 프로퍼티가 아닌 프로토타입의 프로퍼티가 된다.
25.7.3 클래스 필드 정의 제안
- 클래스 필드(필드 또는 멤버)란, 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어다.
// 자바의 클래스 정의
public class Person {
// ① 클래스 필드 정의
// 클래스 필드는 클래스 몸체에 this 없이 선언해야 한다.
private String firstName = "";
private String lastName = "";
// 생성자
Person(String firstName, String lastName) {
// ③ this는 언제나 클래스가 생성할 인스턴스를 가리킨다.
this.firstName = firstName;
this.lastName = lastName;
}
public String getFullName() {
// ② 클래스 필드 참조
// this 없이도 클래스 필드를 참조할 수 있다.
return firstName + " " + lastName;
}
}
- 자바스크립트와는 달리 자바 클래스에서는 클래스 필드를 this 없이 선언한다.
- 자바스크립트는 constructor 내부에서 this에 프로퍼티를 추가해야 한다.
- 자바스크립트 클래스에서 인스턴스 프로퍼티를 참조하려면 반드시 this를 사용해 참조해야 한다.
- 자바는 생략이 가능하다.
- 클래스 기반 객체지향 언어의 this는 항상 클래스가 생성할 인스턴스를 가리키며, this를 사용하는 경우는 주로 클래스 필드가 생성자 또는 메서드 매개변수 이름과 동일할 때 클래스 필드임을 명확히 하기 위해 사용한다.
- 자바스크립트 클래스 몸체에는 메서드만 선언할 수 있다. (클래스 필드 선언하면 문법 에러 발생)
- 하지만 최신 브라우저 (Chrome 72 이상)나 최신 Node.js(버전 12이상)에서 실행하면 문법 에러가 아니라 정상 동작한다.
class Person {
// 클래스 필드 정의
name = "Seo"
}
const me = new Person("Seo")
- 오류가 발생하지 않는 이유는 자바스크립트에서도 인스턴스 프로퍼티를 마치 클래스 기반 객체지향 언어의 클래스 필드처럼 정의할 수 있는 새로운 표준 사양 “Class field declarations”가 2021년 1월 기준 TC39 프로세스의 stage 3(candidate)에 제안되어 있다.
Technical Committee 39(TC39)
- ECMA 인터내셔널은 ECMAScript 이외에도 다양한 기술 사양 관리하고, 관리 주체인 기술 위원회도 여럿 존재하는데 그 중에서도 ECMA-262 사양(ECMAScript)을 관리하는 담당 위원회가 바로 TC39다.
- TC39는 구글, 애플, 마이크로소프트, 모질라 등 브라우저 벤더와 페이스북, 트위터 같이 ECMA-262(ECMASCript)을 제대로 준수해야 하는 기업으로 구성되어 있다.
TC39 프로세스
-
TC39 프로세스란 ECMA-262 사양(ECMAScript)에 새로운 표준 사양(제안)을 추가하기 위해 공식적으로 명문화해 놓은 과정을 말한다.
-
0~4단계까지 총 5개의 단계로 구성되어 있고, 승급 조건을 충족시킨 제안은 TC39의 동의를 통해 다음 단계로 승급된다.
-
이 같은 단계를 거친 사양은 최종적으로 ECMASCript의 새로운 표준 사양이 된다.
-
stage 0 : strawman → stage 1:proposal → stage 2: draft → stage 3: candidate → stage4: finished
-
클래스 필드 정의 제안은 아직 ECMAScript 정식 표준 사양으로 승급되지 않지만, 최신 브라우저나 노드 버전에서 이미 표준 사양으로 승급이 확실시되는 제안을 선제적으로 미리 구현하기 때문에 가능하다.
-
클래스 몸체에서 클래스 필드를 정의하는 경우 this에 클래스 필드를 바인딩해선 안된다.
- this는 클래스의 constructor와 메서드 내에서만 유효하다.
-
클래스 필드를 참조하는 경우 this를 반드시 사용해야 한다.
-
클래스 필드에 초기값을 할당하지 않으면 undefined를 갖는다.
-
인스턴스를 생성할 때 외부의 초기값으로 클래스 필드를 초기화해야 할 필요가 있다면 constructor에서 클래스 필드를 초기화해야 한다.
- 인스턴스 생성시 클래스 필드를 초기화할 필요가 있다면 어차피 constructor 밖에서 초기화할 수 없으므로 constructor 내부에서 클래스 필드를 참조하여 초기값을 할당해야 한다.
-
함수도 클래스 필드에 할당할 수 있다. (클래스 필드를 통해 메서드를 정의할 수도 있다.)
- 클래스 필드에 함수를 할당하는 경우 이 함수는 프로토타입 메서드가 아닌 인스턴스 메서드가 된다. (모든 클래스 필드는 인스턴스 프로퍼티가 된다.)
- 따라서 클래스 필드에 함수를 할당하는 것은 권장하지 않는다.
클래스 필드와 화살표 함수
-
클래스 필드에 화살표 함수를 할당하여 화살표 함수 내부의 this가 인스턴스를 가리키게 하는 경우도 있다.
- p.444 참조
-
인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 있다면 constructor에서 인스턴스 프로퍼티를 정의하는 기존 방식을 사용한다.
-
그럴 필요가 없다면, 기존 방식과 클래스 필드 정의 제안 모두 사용할 수 있다.
25.7.4 private 필드 정의 제안
- 자바스크립트는 완전하게 캡슐화를 지원하지 않는다. (인스턴스 프로퍼티는 언제나 public이다)
- 클래스 필드 정의 제안을 사용해도, 클래스 필드는 기본적으로 public이다.
- 2021년 1월 기준 TC39 프로세스 stage 3(candidate)에서 private 필드 정의할 수 있는 새로운 표준 사양이 제안되어 있다. (최신 브라우저 및 Node 버전에선 이미 구현되어 있음)
- private 필드의 선두에는 #을 붙여주며, 참조시에도 #을 붙여줘야한다.
class Person {
//private 필드 정의
#name = ""
constructor(name) {
//private 필드 참조
this.#name = name
}
}
const me = new Person("Seo")
// private 필드 #name은 클래스 외부에서 참조할 수 없다.
console.log(me.#name)
// SyntaxError: Private field '#name' must be declared in an enclosing class
- 타입스크립트는 접근 제한자를 모두 지원한다.
- 클래스 외부에서 private 필드에 직접 접근할 수 있는 방법은 없지만, 접근자 프로퍼티를 통해 간접적으로 접근하는 방법은 유효하다.
class Person {
//private 필드 정의
#name = ""
constructor(name) {
this.#name = name
}
// name은 접근자 프로퍼티다.
get name() {
// private 필드를 참조하여 trim한 다음 반환한다.
return this.#name.trim()
}
}
const me = new Person(" Seo ")
console.log(me.name) // 'Seo'
- private 필드는 반드시 클래스 몸체에 정의해야하며, constructor에 정의하면 에러가 발생한다.
25.7.5 static 필드 정의 제안
- 클래스에는 static 키워드를 사용해 정적 메서드를 정의할 수 있지만, 정적 필드는 정의할 수 없었다.
- 2021년 1월 기준 static public 필드와 static private 필드, static private 메서드를 정의할 수 있는 새로운 표준 사양 “Static class features”가 TC39 프로세스 stage 3에 제안되어 있으며, static public과 static private 필드는 현재 이미 구현되어 있다.
class MyMath {
// static public 정의
static PI = 22 / 7
// static private 정의
static #num = 10
// static 메서드 정의
static increment() {
return ++MyMath.#num
}
}
console.log(MyMath.PI)
console.log(MyMath.increment())
25.8 상속에 의한 클래스 확장
25.8.1 클래스 상속과 생성자 함수 상속
- 상속에 의한 클래스 확장은 프로토타입 기반 상속과는 다른 개념이다.
- 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속 받는 개념이다.
- 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것.
- 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 기본적으로 제공되지만, 생성자 함수는 그렇지 않다.
- extends 키워드를 사용해 클래스 확장을 할 수 있다.
25.8.2 extends 키워드
- 상속을 통해 확장된 클래스를 서브클래스라 부르고, 서브클래스에 상속된 클래스를 수퍼클래스라 부른다.
- 서브 클래스는 파생 클래스, 자식 클래스라고도 부른다.
- 수퍼클래스는 베이스 클래스 부모 클래스라고 부르기도 한다.
- extends 키워드의 역할은 수퍼클래스와 서브클래스 간의 상속 관계를 설정하는 것이다.
- 프로토타입을 통해 상속 관계를 구현한다.
- 수퍼클래스와 서브클래스는 인스턴스의 프로토타입 체인뿐 아니라 클래스 간의 프로토타입 체인도 생성한다. (프로토타입 메서드, 정적 메서드 모두 상속 가능)
25.8.3 동적 상속
- extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수도 있다.
// 생성자 함수
function Base(a) {
this.a = a
}
// 생성자 함수를 상속받는 서브클래스
class Derived extends Base {}
const derived = new Derived(1)
console.log(derived)
function Base1() {}
class Base2 {}
let condition = true
// 조건에 따라 동적으로 상속 대상을 결정하는 서브클래스
class Derived extends (condition ? Base1 : Base2) {}
const derived = new Derived()
console.log(derived)
console.log(derived instanceof Base1)
console.log(derived instanceof Base2)
- extends 키워드 다음에는 클래스뿐 아니라 [[Construct]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 몯느 표현식을 사용할 수 있다.
25.8.4 서브클래스의 constructor
- 클래스에서 constructor를 생략하면 클래스에 다음과 같이 비어있는 constructor가 암묵적으로 정의된다.
constructor() {}
- super()는 수퍼클래스의 constructor(super-constructor)를 호출하여 인스턴스를 생성한다.
class Base {
constructor() {}
}
class Derived extends Base {
constructor(...args) {
super(...args)
}
}
const derived = new Derived()
console.log(derived)
25.8.5 super 키워드
- super 키워드는 함수처럼 호출할 수도 있고 this와 같이 식별자처럼 참조할 수 있는 특수 키워드다.
- super를 호출하면 수퍼클래스의 constructor(super-constructor)를 호출한다.
- super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.
- super를 호출할 때 주의할 사항
- 서브클래스에서 constructor를 생략하지 않은 경우, 서브클래스의 constructor에서 반드시 super를 호출해야 한다.
- 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.
- super는 반드시 서브클래스의 constructor에서만 호출한다. 서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생한다.
25.8.7 표준 빌트인 생성자 함수 확장
- String, Number, Array 같은 표준 빌트인 객체도 [[Construct]] 내부 메서드를 갖는 생성자 함수이므로 extends 키워드를 사용하여 확장할 수 있다.