모던자바스크립트 DeepDive : 25장 클래스

ES6에 도입된 자바스크립트의 클래스 문법은 기존 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 쉽게 학습할 수 있도록 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 만든 것이다.

클래스 호이스팅

클래스 선언문으로 정의한 클래스는 런타임 이전에 평가되어 함수 객체를 생성한다. 클래스는 클래스 정의 이전에 참조할 수 없으며, let, const 키워드와 같이 호이스팅 된다.

클래스 메서드

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

class Person {
	constructor(name) {
		this.name = name; // public private 정의를 위해서는 this.#name = name;
	}
	sayHi() {
		console.log(`Hi! I'm ${this.name}`);
	}
	static sayHello() { // 정적 메서드 
		console.log('Hello!');
	}
}
const me = new Person('Lee');
console.log(me.name); // Lee
me.sayHi(); // Hi! I'm Lee
Person.sayHello(); // Hello!

constructor는 생성자 함수와 동일하게 암묵적으로 this를 반환하기 때문에 별도의 반환문을 갖지 않아야 한다.

클래스에서 정의한 메서드는 strict mode로 실행되며, function 키워드를 생략한 메서드 축약표현을 사용한다.

[[Enumerable]]의 값이 false이기 때문에 for...in 문이나 Object.keys로 열거할 수 없다.

프로토타입 메서드

클래스 내부에서 정의한 메서드는 기본적으로 프로토타입 메서드가 되며, 클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 된다.

상속에 의한 클래스 확장

class Animal {
	constructor(age, weight) {
		this.age = age;
		this.weight = weight;
	}
	eat() { return 'eat'; }
	move() { return 'move'; }
}

class Bird extends Animal {
	fly() {return 'fly'; }
}
const bird = new Bird(1, 5);
console.log(bird); // bird { age: 1, weight: 5}
console.log(bird.move()); // move
console.log(bird.fly()); // fly

상속으로 확장된 클래스를 서브클래스 혹은 자식클래스라 부르며, 서브클래스에게 상속된 클래스를 슈퍼클래스 혹은 베이스클래스, 부모클래스 라고 부르기도 한다.