[Javascript] Class (ES6) 개념 및 예제

(엘리님의 강의를 참고했습니다💗)

class란? object를 뽑아내기 위한 기계일 뿐,

붕어빵 틀(class)에 팥을 넣으면 팥붕어빵(object)이 나오는 것과 마찬가지입니다.

class는 ES6에 추가된 문법입니다 :)

 

object 생성하는 방법 (1)

클래스를 사용하지 않았을 때 :

const Olly = {
     name: Olly,
     age: 20
 };
 
 const Elin = {
     name: Elin,
     age: 30
 };

만약 object가 100개라면? 100개의 object를 생성하는 것은 불가능합니다.

그래서 사용하는게 class이죠! 붕어빵 틀만 만들어놓으면 팥이나 크림만 넣으면 붕어빵이 완성되는 것처럼, class만 만들어놓고 파라미터로 값만 넣어주면 object를 한줄로 생성할 수 있습니다.

 

object 생성하는 방법 (2)

클래스를 사용했을 때 :

//이전 방식
function person(name,age){
    this.name = name;
    this.age = age;
}
const olly = new person('olly', 20);

//ES6에 추가된 Class 방식
class person{
    constructor(name,age){
    	this.name = name;
    	this.age = age;
    }
    speak(){
    	console.log(`${this.name}, hello!`);
    }
}

const olly = new person('olly', 20); //상속으로 object 생성 끝
const Elin = new person('Elin', 30); 
olly.speak(); //olly, hello!
Elin.speak(); //Elin, hello!

 

 

extends를 사용하면 동일한 클래스를 다른 클래스에서 중복으로 사용할 수 있습니다.

class shape{ //기본 템플릿
	constructor(width,height,color){
		this.width = width;
		this.height = height;
		this.color = color;
	}
	
	draw(){
		console.log(`drawing ${this.color} color of`);
	}
	
	getArea(){
		return this.width * this.height;
	}
}


class restangle extends shape{} //shape클래스를 restangle이라는 클래스에 중복으로 재사용
const Restangle = new restangle(20,20,'blue');
Restangle.draw(); //drawing blue color!
console.log(Restangle.getArea()); //400


class triangle extends shape{
	draw(){
		super.draw(); // 원래 shape 클래스의 draw 메소드를 그대로 가져온 다음
		console.log('new draw!'); // 새로운 코드 추가 = overriding
	}
	getArea(){
		return (this.width * this.height) / 2;
	} //수정해서 재사용 가능
}
const Triangle = new triangle(20,20,'red');
Triangle.draw(); //drawing red color! new draw!
console.log(Triangle.getArea()); //200