JS는 프로토타입 기반 객체지향 언어이며 , 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어이다.
// ES5 생성자 함수
var Person = (function () {
**// 생성자 함수
function Person(name) {
this.name = name;
}
// 프로토타입 메서드
Person.prototype.sayHi = function () {
console.log('Hi! My name is ' + this.name);
};**
// 생성자 함수 반환
return Person;
}());
// 인스턴스 생성
var me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee
ES6에서 도입된 클래스는 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 도와준다.
클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있다.
단, 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 않는다. 클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다.
클래스
new 연산자 없이 호출하면 에러가 발생한다.
클래스는 상속을 지원하는 extends와 super 키워드를 제공한다.
호이스팅이 발생하지 않는 것처럼 동작한다.
클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode 를 해제할 수 없다.
constructor, 프로토타입 메서드, 정적 메서드 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다.
⇒ 열거되지 않는다.
생성자 함수
new 연산자 없이 호출하면 일반 함수로서 호출된다.
extends와 super 키워드를 지원하지 않는다.
함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
암묵적으로 strict mode가 지정되지 않는다.
⇒ 생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 유사하지만 클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다!
따라서 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 새로운 객체 생성 메커니즘으로 보는 것이 좀 더 합당하다.