25-1. 클래스는 프로토타입의 문법적 설탕인가?

자바스크립트는 프로토타입 기반 객체 지향 언어인데, ES6때 클래스도 도입이 된 것임

기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록한 ‘문법적 설탕’이라고 볼수 있지만 새로운 객체 생성 매커니즘으로 이해는것이 합당함

“클래스”와 “생성자 함수” 모두

• 프로토타입 기반의 인스턴스를 생성하지만,
• “클래스”는 “생성자 함수”보다 엄격
• “클래스”는 생성자 함수에서는 제공하지 않는 기능도 제공함

25-2. 클래스 정의

클래스는 함수임 ⇒ 따라서, 클래스는 값처럼 사용할 수 있는 일급 객체임

• 생성자 함수와 마찬가지로 파스칼 케이스 (예: PascalCase)로 이름짓는게 일반적, 그렇지만 파스칼 케이스가 아니여도 에러는 안남

  25-3
  
  // 익명 클래스 표현식
  const Person = class {};
  
  // 기명 클래스 표현식
  const Person = class Myclass {};
  

  

• 클래스 몸체에는 0개이상의 메서드?만 정의할 수 있음

  • 정의할 수 있는 메서드:
    • constructor(생성자)
    • 프로토타입 메서드
    • 정적 메서드

  25-4
  
  class Person {
  	// 생성자
  	constructor (name) { // 인스턴스 생성 및 초기화
  		this.name = name; // name 프로퍼티는 public이다.
  	}
  
  	// 프로토타입 메서드
  	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!
  

  

생성자 함수 vs 클래스

생성자 함수

var Person = (function() {

	// 생성자 함수
	function Person(name) {
		this.name = name;
	}

	// 프로토타입 메서드
	Person.prototype.sayHi = function () {
		console.log('Hi! My name is ' + this.name);
	};

	// 정적 메서드
	Person.sayHello = function () {
		console.log('Hello!');
	};

	// 생성자 함수 반환
	return Person;
}())

클래스

class Person {
	constructor(name) {
		this.name = name;
	}
	
	sayHi() {
		console.log(`Hi! My name is ${this.name}`)
	}

	static sayHello() {
		console.log('Hello');
	}
}

25-3. 클래스 호이스팅