클래스

 

 

 

 

클래스

클래스와 생성자 함수는 프로토타입 기반의 인스턴스를 생성하지만 동일하게 동작하지는 않는다.

클래스가 더 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다.

 

1.  클래스를 new 연산자 없이 호출하면 에러 발생. 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출.
   
   
2.  클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 생성자 함수는 지원하지 않는다.
   
   
3.  클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
   
   
4.  클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 해제할 수 없다. 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
   
   
5.  클래스의 constructor, 프로토타입 메서드,  정적 메서드는 모두 프로퍼티 어트리뷰트[[Enumerable]]의 값이 false다. 다시 말해, 열거되지 않는다.

 

클래스의 extends와 super 키워드는 상속 관계 구현을 더욱 간결하고 명료하게 한다.

 

 

---

클래스 정의

클래스는 class 키워드를 사용하여 정의한다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다.

 

 

// 클래스 선언문
class Person {}

 

// 익명 클래스 표현식
const Person = class {};

// 기명 클래스 표현식
const Person = class MyClass {};

 

클래스를 표현식으로 정의할 수 있다는 것은 값으로 사용할 수 있는 일급 객체라는 것을 의미한다.

 

• 무명의 리터럴로 생성 가능. 즉, 런타임에 생성이 가능.
• 변수나 자료구조(객체, 배열)에 저장할 수 있음.
• 함수의 매개변수에게 전달 가능.
• 함수의 반환값으로 사용 가능.

클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세 가지.

 

 

 

---

 

ES5 클래스 작성 문법

// 속성의 정의
fuction Car (brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드
    this.brand = brand;
    this.name = name;
    this.color = color;
}

// 메서드의 정의
function Car (brand, name, color) { /* 생략 */ }
Car.prototype.refuel = function() {
	// 연료 공급을 구현하는 코드
}
Car.prototype.drive = function() {
	// 운전을 구현하는 코드
}

 

ES6 클래스 작성 문법

// 속성의 정의
class Car {
	constructor(brand, name, color) {
    // 인스턴스가 만들어질 때 실행되는 코드
    this.brand = brand;
    this.name = name;
    this.color = color;
    }
}

// 메서드의 정의
class Car {
	constructor(brand, name, color) { /* 생략 */ }
    
     refuel() {
     }
    
     drive() {
     }
    }

 

인스턴스

let avante = new Car ('hyundai', 'avante', 'black');
avante.color;
avante.drive();

let mini = new Car('bmw', 'mini', 'white');
mini.brand;
mini.refuel();