<JavaScript> 클래스와 인스턴스

클래스(class)는 일종의 청사진이고, 청사진을 이용해 만든 새로운 객체가 인스턴스(instance)이다. 

 

코드로 보기

// ES6 문법을 기반으로 작성한 Student 클래스
class Student {
    constructor(name, grade, gender) {
        this.name = name;
        this.grade = grade;
        this.gender = gender;
    }
    study() {
        console.log(this.name + '가 공부를 시작합니다.');
    }
}

// 클래스를 이용해 생성한 인스턴스
let chulsoo = new Student('김철수', 3, 'male');
chulsoo; // Student {name: '김철수', grade: 3, gender: 'male'}
chulsoo.study(); // 김철수가 공부를 시작합니다.

let younghee = new Student('김영희', 3, 'female');
younghee; // Student {name: '김영희', grade: 3, gender: 'female'}
younghee.study(); // 김영희가 공부를 시작합니다.

 

인스턴스

chulsoo와 younghee는 모두 클래스를 이용해 생성한 인스턴스 객체이다. 

각 인스턴스에서 클래스에 정의된 메소드(여기서는 study)를 사용할 수 있다.

 

생성자 함수 constructor()

constructor()는 인스턴스 객체를 초기화해주는 함수이다. 

새롭게 생성될 인스턴스 객체 속 키의 값을 지정할 수 있다.

constructor는 한 클래스에서 한 번만 쓸 수 있다.

여러 번 쓰면 SyntaxError가 발생한다.

constructor - JavaScript | MDN

 

특징

클래스명은 대문자로 시작하는 일반명사이다. (일반 함수와 구분하기 위함)

인스턴스는 new 키워드를 이용해 만든다.

 

ES5 문법

ES6 문법에서는 class 키워드를 이용해 클래스를 정의한다.

반면 ES5에서는 function 키워드를 이용해 인스턴스를 초기화하며, 메소드를 정의할 때에는 prototype을 이용한다.

// ES5 문법을 기반으로 작성한 Student 클래스
function Student(name, grade, gender) {
  this.name = name;
  this.grade = grade;
  this.gender = gender;
}

Student.prototype.study = function() {
  console.log(this.name + '가 공부를 시작합니다.');
}