클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

자바스크립트에서 클래스는 함수의 한 종류이다.

사용자나 물건같이 동일한 종류의 객체를 여러 개 생성해야 할 때,

new 연산자와 생성자 함수에서 배운 new fucntion을 사용할 수 있다.

여기에 더해서 클래스라는 문법을 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 구현할 수 있게 된다.

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

이렇게 클래스를 만들고, new Myclass() 를 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

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

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

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

class User {…} 문법 구조가 하는 일은 다음과 같다.

  1. User 라는 이름을 가진 함수를 만든다. 함수 본문은 생성자 메서드 constructor에서 가져온다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어진다.
  2. sayHi 같은 클래스 내에서 정의한 메서드를 User.prototype 에 저장한다.

new User 를 호출해 객체를 만들고, 객체의 메서드를 호출하면 함수의 prototype 프로퍼티에서 설명한 것처럼 메서드를 prototype 프로퍼티를 통해 가져온다. 이 과정이 있기 때문에 객체에서 클래스 메서드에 접근할 수 있다.

class User {
	constructor(name) { this.name = name; }
	sayHi() { alert(this.name); } 
	
	// 클래스는 함수다.
	alert(typeof User); // function
	
	// 정확히는 생성자 메서드와 동일하다.
	alert(User === User.prototype.constructor); // true
	
	// 클래스 내부에서 정의한 메서드는 User.prototype에 저장된다.
	alert(User.prototype.sayHi); // alert(this.name);
	
	// 현재 프로토타입에는 메서드가 두 개다.
	alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

클래스 표현식

함수처럼 클래스도 다른 표현식 내부에서 정의, 전달, 반환, 할당할 수 있다.

let User = class {
	sayHi() {
		alert("안녕하세요.");
	}
};