[블로깅]클래스와 인스턴스

인트로

클래스에 대한 깊고 자세한 내용은 아래 포스트에 있습니다. 

내가 해냄 ver에 상속과 인스턴스 생성 과정 등의 내용을 포함하고 있습니다.

오늘은 블로깅 과제용 간단 요약 ver입니다.

클래스 내가 해냄

 

---

클래스를 정의해 보자

클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 

클래스는 특별한 함수입니다. 클래스도 함수처럼 class 표현식과 class 선언으로 정의할 수 있습니다.

Class 선언

class Counter {
	constructor() {
		this.value = 0;
	}
	increase() {
		this.value++;
	}
	decrease() {
		this.value--;
	}
	getValue() {
		return this.value;
	}
}

Class 표현식

let Car6 = class {
	constructor(brand,name,color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
}
console.log(Car6.name); //Car6

let Car6_ = class Car62{
	constructor(brand,name,color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
}
console.log(Car6_.name); //Car62

클래스의 이름은 파스칼 케이스를 사용하는 게 일반적입니다. 클래스는 일급 객체입니다.

클래스의 name 속성으로 class 표현식의 이름을 찾을 수 있습니다.

 

클래스가 정의할 수 있는 메서드

• constructor (생성자) : 클래스 내에 최대 한 개만 존재, constructor 내부에서 this에 추가한 프로퍼티는 인스턴스 프로퍼티가 됩니다. this 즉 인스턴스를 반환하기 때문에 별도의 반환문을 가지지 않습니다.
• 프로토타입 메서드 : 클래스에 정의한 메서드는 기본적으로 프로토타입 메서드가 됩니다.
• 정적 메서드 : 인스턴스를 생성하지 않아도 호출할 수 있는 메서드입니다. 메서드에 static 키워드를 붙이면 정적메서드(클래스메서드)가 됩니다. 인스턴스가 상속받지 못합니다.

new 키워드와 인스턴스

생성자 함수와 달리 클래스는 new 연산자 없이 호출하면 에러가 발생합니다.

new 키워드를 사용하여 인스턴스를 만들 수 있습니다. new 키워드 사용 시 생성자 함수가 실행됩니다.

인스턴스는 생성자 함수에 의해 만들어진 객체를 말합니다.

 

ES5 , ES6 클래스 작성 문법

//ES5
function Car5(brand, name, color) {
	this.brand = brand;
	this.name = name;
	this.color = color;
}
Car5.prototype.refuel = function() {
	console.log(`${this.name}연료 주입 중`);	
}
//ES6
class Car6 {
	constructor(brand,name,color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
	refuel() {
		console.log(`${this.name}연료 주입 중`);	
	}
}

let car5 = new Car5('대영', 'avante', 'black');
console.log(car5.brand); //대영
car5.refuel(); //avante연료 주입 중

let car6 = new Car6('순양', 'APOLLO', 'black');
console.log(car6.brand); //순양
car6.refuel(); //APOLLO연료 주입 중

ES5는 prototype 키워드를 사용해 메서드를 정의했습니다.

ES6는 생성자 함수와 함께 class 키워드 안쪽에 묶어 정의합니다.

---

 

코드스테이츠 & MDN & 모던 자바스크립트 Deep Dive 내용을 참고하였습니다.