JavaScript Class and Instance

지원 ·2023년 5월 11일

Class (class 아님, 대소문자 주의)

Class는 ES6에서 소개된 새로운 생성자 함수이다. JavaScript ES5에서는 Prototype를 사용했었고, Class는 원래 Java와 TypeScript에서만 사용했었다. 그리고 최신 JS ES6에서 소개된 것이다.

Class

ES6 문법 생성자 함수이다.

주관적인 생각이지만, Class를 배우기 전에, Prototype을 먼저 공부하고 사용해보는게 더 효율적인 것 같다.

Class라는 생성자 함수를 사용해 객체의 템플릿/블루프린트를 만들 수 있다고 생각하면 이해하는데 조금 더 수월하다. 아래 예제를 보면, class Person 템플릿으로 여러 객체가 생성되는 것을 확인할 수 있다. 그리고 새롭게 생성되는 객체를 Instance(인스턴스)라고 부른다.

class (클래스 이름, 무조건 대문자)
constructor(객체의 Property)
this. (key) = value;

// 클래스
class Person {
	constructor(name, age) {
    	this.name = name; 
        this.age = age; 
    }
}

Instance 인스턴스 / new 키워드

class Person()로 새로운 Instance 만들 수 있다. 그리고 instance는 새로 만들어진 변수라고 생각하면 된다. (james, sarah)

new 키워드 인스턴스를 생성할 때 반드시 new 키워드를 사용해야 한다. 사용 안하면 새로운 객체가 생성되지 않는다.

//인스턴스
const james = new Person('James', 24);
console.log(james.age) // 24
console.log(james.name) // 'James'

const sarah = new Person('Sarah', 22);
console.log(james.age) // 22
console.log(james.name) // 'Sarah'

Prototype, Constructor, this

이미지 코드스테이츠 참조

Prototype

Prototype: 영어로 무슨 의미리 갖고 있는지 아시나요?
예비 모델, 샘플 모델, 즉 실제 제품이 만들기전에 다략적인 형태만 나타내닌 것.

Class에서 Prototype은 어떻게 사용할 수 있을까?
Person 예제 :

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

//인스턴스
const james = new Person('James', 24);
console.log(james.age) // 24
console.log(james.name) // 'James'


//prototype
Person.prototype.isHuman = 'yes'

Person.prototype.isHuman을 사용하면 class Person에 새로운 property가 추가된다고 생각하셨나요? 아닙니다.

CLass.prototype.key = value;
이런 포멧을 갖고 있는데요, Class에 새로 추가하지 않고, 앞으로 만드는 Instance 또는 이미 만들어진 Instance에서 객체로 적용이 된다.

class Person에 변경사항 없음