클래스

• 생성자 함수를 더 깔끔하게 사용하기 위해 나온 문법
• Prototype 기반 상속을 보다 명료하게 사용할 수 있음
• 다른 언어의 클래스 문법과 유사하나, 내부 동작은 다름 — Prototype 기반으로 상속 흉내
• 새로운 블록 스코프 형성 — 클래스 블록 안에서 사용한 this는 인스턴스 객체를 가리킴

클래스 기본 문법

같은 종류의 그룹에 속하는 여러 객체를 생성하기 위해 변수와 메소드(함수)로 구성된 툴

사람, 특정 카테고리의 물건처럼 같은 종류의 객체를 여러개 생성해야할 때가 있다. new 생성자와 새롭게 도입된 클래스 문법을 사용하여 객체 지향 프로그래밍의 여러 기능을 JS에서도 활용할 수 있다.

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

<aside> 💡 클래스는 객체 리터럴과 다르게 메서드 사이에 쉼표가 없다. 쉼표를 넣으면 에러가 발생하므로 주의하자

</aside>

클래스를 만들고 new MyClass()를 호출하면, 정의한 메서드가 포함된 새로운 객체를 생성한다. 객체의 기본 상태를 설정해주는 생성자 constructor()는 new 키워드로 호출되며, 간편하게 객체를 초기화해준다.

class User {
	constructor(name) {
		// Property
		this.name = name;
	}
	// Method
	sayHi() {
		console.log('Hello ' + this.name);
	}
}

const user = new User('John')
user.sayHi() // Hello John

new User('John')을 호출하면 아래 과정을 거친다.

1. 인스턴스 생성 : new 연산자를 사용하여 User 클래스의 새로운 인스턴스가 생성된다. 이때 생성된 인스턴스는 User 클래스의 프로토타입을 상속받는다.
2. 생성자 실행 : 생성된 인스턴스(객체)를 this로 설정하고 User 클래스의 constructor를 호출한다. 위 예시에선 John 인자가 constructor로 전달된 후 this.name에 할당된다.
3. 인스턴스 반환: 생성자 함수 내에서 명시적으로 다른 객체를 반환하지 않는한 new 연산자는 기본적으로 새로 생성된 인스턴스(this)를 반환한다.

클래스란?

class User {
	constructor(name) { this.name = name; }
	sayHi() { console.log('Hello ' + this.name); }
}

typeof User // function
User === User.prototype.constructor // true
User.prototype.sayHi // sayHi() { console.log('Hello ' + this.name); }
Object.getOwnPropertyNames(User.prototype) // ["constructor", "sayHi"]