[JS] 생성자 함수와 class의 차이

01. 클래스 생성자는 new와 함께 호출하지 않으면 에러가 발생한다.

// class 생성
class ClassName{
  constructor(){}
}

// 생성자 함수 생성
function ConsName(){}


// 호출
ClassName(); // VM20:1 Uncaught TypeError: Class constructor ClassName cannot be invoked without 'new' at <anonymous>:1:1
ConsName();

 

02. 클래스 메서드는 열거할 수 없다.

클래스의 prototype 프로퍼티에 추가된 메서드 전체의 enumerable 플래그는 false이다.

- enumerable플래그는 for...in으로 객체 순환을 할 때, key의 값의 반환 유무를 뜻한다.

- for...in으로 객체 순환을 할 때, prototype 프로퍼티에 저장된 함수 값을 반환하는 것에서 차이가 발생한다.

• 생성자 함수 => 함수 반환O
• class => 함수 반환 X

[예제] 

function ConsName(name, age){
  this.name = name;
  this.age = age;
}
ConsName.prototype.fun = function(){}

class ClassName{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  fun(){}
}

let objCons = new ConsName('mill', 30); //
let objClass = new ClassName('밀', 30);

for(let key in objCons){
  console.log(key)
}

for(let key in objClass){
  console.log(key)
}

좌측: 생성자 함수 / 우측: class => class는 함수의 key값을 반환하지 않았다.

03. 클래스는 항상 엄격 모드로 실행된다.

---

[공부 좌표]

클래스는 단순한 편의 문법이 아닙니다

 

[참고]

객체 순환 fon...in / 배열 순환 for...of

데이터 프로퍼티(data property) 플래그 - writable, enumerable, configurable