Section2 / Unit2 : 클래스와 인스턴트

클래스

• 값처럼 사용할 수 있는 일급 객체
• 특징
  ✔︎ 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다
  ✔︎ 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
  ✔︎ 함수의 매개변수에게 전달할 수 있다.
  ✔︎ 함수의 반환값으로 사용할 수 있다.
• 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.

//클래스 선언문
class Person{
    //생성자
    constructor(name){
        this.name = name;  // name 프로퍼티는 public하다
    }

	//프로토타입 메서드
	sayHi(){
		console.log(`Hi! My name is ${this.name}`);
	}

	//정적 메서드
	static sayHello(){
		console.log('Hello!');
	}
}

//인스턴스 생성
const me = new Person('Lee');

//인스턴스의 프로퍼티 참조
console.log(me.name);  // Leee
//프로토타입 메서드 호출
me.sayHi(); // Hi! My name is Lee
//정적 메서드 호출
Person.sayHello();  // Hello!

 

인스턴스 생성

• 클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성

class Person {}
const me = new Person();
console.log(me);  // Person {}

• 함수는 new 연산자의 사용 여부에 따라 일반 함수로 호출되거나
  인스턴스 생성을 위한 생성자 함수로 호출되지만
  클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로 반드시 new 연산자와 함께 호출
  -> 클래스를 new 연산자 없이 호출하면 타입 에러 발생
• 클래스 표현식으로 정의된 클래스의 경우,
  클래스를 가리키는 식별자(Person)를 사용해 인스턴스를 생성하지 않고 기명 클래스 표현식의 클래스 이름(MyClass)을 사용해 인스턴스를 생성하면 에러가 발생

const Person = class MyClass {};
const me = new Person();
console.log(MyClass);  // ReferenceError
const you = new MyClass();  // ReferenceError

• 기명 함수 표현식과 마찬가지로 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가능

생성자 함수

• return 값을 만들지 않는다
• 인스턴스가 만들어질 때 실행되는 코드
• 생성자 함수의 함수 몸체에서 수행해야 하는 것
  ✔︎ 인스턴스를 생성
  ✔︎ 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당)

ES5 클래스 작성 문법

• 클래스를 작성하는데 function 키워드를 사용
• 클래스 이름은 함수 이름 규칙을 따른다
• 일반적으로 클래스 이름의 첫 글자는 대문자

function MyClass() {
    // constructor(생성자) 함수
}
MyClass.prototype.methodName = function() {
	// 메서드 내용
}

• 위와 같이 클래스 생성자를 정의하고, prototype 객체에 메서드를 추가
• 이후 해당 클래스의 인스턴스를 생성할 때 new 키워드를 사용

let myInstance = new MyClass();

//ES5 작성 예시
function Car(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
}
Car.prototype.drive = function() {
    console.log(this.name + '가 운전을 시작합니다.');
}
let avante = new Car('hyundai', 'avante', 'black');
avante.color;  // black
avante.drive();  // 'avante'가 운전을 시작합니다.'

ES6 클래스 작성 문법

//ES5 예제를 ES6로 만들어보기
class Car {
    constructor(brand, name, color) {
        this.brand = brand;
        this.name = name;
        this.color = color;
    }
    drive() {
        console.log(${this.name}가 운전을 시작합니다.);
    }
}

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // black
avante.drive(); // 'avante'가 운전을 시작합니다.'