도입부

ES6이전까지 자바스크립트에는 Class라는 키워드가 없었다. 따라서, 객체지향 디자인 패턴을 따라하기 위해서 각자 개발에서 사용하곤 했다.

하지만 ES6에 드디어 도입이 되어서 다른 언어에서 유입되는 개발자들이 좀 더 편하게 개발할 수 있게 되었다. Class라는 키워드는 어떤 추가 기능을 제공하는게 아니라 원래 있었던 객체지향의 특징들을 구현하기 위해 더짧고 깔끔한 코드를 제공한다.

<aside> 💡

팩토리 패턴과 팩토리 메서드 패턴은 다른것이다. 팩토리 패턴은 객체 자체가 부품인 공장인것이다. 그 공장에 어떤 부품(객체)주세요 ~ 했을때 그 부품을 내어준다.

반면에 팩토리 메소드 패턴은 부품 자체를 만드는 일이다. 이 부품에 이런이런 재료들이 필요해요~

해서 넘겨주면 그 부품을 만들어준다.

단위가 다른것이다.

</aside>

클래스도 함수의 한 종류이다.

const x = function() {} // 함수 표현식
const y = class {} // 클래스도 함수이다.

Object.getPrototypeOf(x)
Object.getPrototypeOf(y)
// 둘다, f() { [native code] } 출력 -> Function.prototype을 의미함.

• 객체가 가진 [[Prototype]]속성에 접근하기 위해 직접적으로 Object.__proto__와 같이 접근한게 아니라 getPrototypeOf 메소드를 통해서 접근했다.
• 함수호출시 new키워드를 함께 사용하면 그 함수가 생성자로 동작한다.
• class도 함수이므로 new class를 하게 되면 마찬가지로 생성자로 동작한다.
• 함수가 그냥 호출될때랑 new키워드와 함께 생성자로 호출될때 차이를 구분하기 힘드므로 관행적으로 생성자 함수는 첫글자를 대문자로 쓰는것처럼, 클래스는 항상 생성자로 사용되기 떄문에 첫글자를 대문자로 써야 한다.

메소드 정의 방식 변경

ES6 이전

function Hero(name, level) {
    this.name = name;
    this.level = level;
}

// Adding a method to the constructor
Hero.prototype.greet = function() {
    return `${this.name} says hello.`;
}

• 위와 같이 프로토타입에 메소드를 정의하는 방식.
• Hero 생성자 함수에 의해 생성된 모든 객체는 [[prototype]] 속성으로 생성자 함수의 프로토타입 객체에 접근할 수 있음. 그 객체에 메소드가 정의된것과 동일한 효과.