ES6 - class

MDN_Classes >

 

function 오브젝트를 생성하는 목적

그저 function 오브젝트 개념으로 사용하거나 또는 클래스 개념으로 사용하기 위해서 function 오브젝트를 생성하였다.

# 프로토타입에 메소드를 작성 X => 그저 function 오브젝트 개념
var book = function(){};

# 프로토타입에 메소드 작성 O => 클래스 개념
var Book = function(){};
Book.prototype.getBook = function(){};

ES6이전의 자바스크립트는 prototype에 메소드를 연결하여 클래스 개념을 사용하였다. 하지만, ES6부턴 class키워드가 추가되면서 class키워드를 이용하여 클래스를 생성할 수 있다.

 

class

1. class

• class는 사실 특별한 함수이기 때문에 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class문법도 class표현식과 class선언 두 가지 방법을 제공한다.
• 자바스크립트는 prototype에 메소드를 연결하여 작성한다. ES6에서는 class에 메소드를 작성하여 클래스를 생성할 수 있다. 하지만, 내부에서는 prototype에 연결하는 과정이 일어난다.
• 클래스의 body부분은 strict mode에서 실행된다. 그렇지 않으면 조용히 오류가 발생할 수 있기 때문이다.

 

1) class 선언

class를 선언하기 위해서 class 키워드와 함께  클래스명를 사용한다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

 

2) class 표현식

 Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다.

이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효하다. 

# unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

# named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle2"