클래스

자바스크립트는 프로토타입 기반 객체지향 언어로 클래스가 필요없는 객체지향 언어이다.
ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.

ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다.

클래스와 생성자 함수의 차이

1. 클래스를 new 연산자 없이 호출하면 에러가 발생하지만 생성자 함수를 new연산자 없이 호출하면 일반 함수로서 호출된다.
2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다.
3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 언언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
4. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해체할 수 없다. 하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
5. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트[[Enumerable]]의 값이 false다. 다시 말해, 열거되지 않는다.

클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료

클래스 정의

• 클래스는 class 키워드를 사용하여 정의
• 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적

//클래스 선언문
class Person{}

//일반적이지 않지만 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다.

//익명 클래스 표현식
const Person = class {};

//기명 클래스 표현식
const Person = class MyClass {};

클래스는 함수이고 일급객체이다.

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

//클래스 선언문
class Person{
  //생성자
  constructor(name){
    //인스턴스 생성 및 초기화
    this.name = name; // name 프로퍼티는 publicgkek.
  }
  
  //프로토타입 메서드
  sayHi(){
    console.log(`Hi! My name is ${this.name}`);
  }
  
  //정적 메서드
  static sayHello(){
    console.log('Hello!');
  }
}

//인스턴스 생성
const me = new Person('Lee');

//인스턴스의 프로퍼티 참조
console.log(me.name); //Lee
//프로토타입 메서드 호출
me.sayHi(); //Hi! My name is Lee
//정적 메서드 호출
Person.sayHello(); //Hello!

클래스와 생성자 함수의 정의 방식은 형태적인 면에서 매우 유사

클래스 호이스팅

클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다. 단, 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅된다.