[JavaScript] 자바스크립트의 클래스

 

클래스란

객체 지향 프로그래밍에서 동일한 종류의 객체를 여러 개 생성하기 위한 틀. 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 이루어져 있다. 

주로 재사용을 위해 사용되며, 볼륨이 크거나 복잡한 사이트를 만들때 효과적이다. 

ES6에서 추가된 문법으로, 이전에는 prototype을 기반으로 클래스를 구현할 수 있었다.

 

클래스 선언

클래스는 함수와 달리 호이스팅 될 때 초기화되지 않는다. 따라서 정의를 먼저 해야 사용할 수 있다는 점에 유의하자. 

클래스의 메서드는 클래스의 body(중괄호({}) 내부)에 정의해야 한다. 

 

생성자(constructor)

새 클래스 객체를 생성할 때, 가장 먼저 자동으로 실행되며 객체의 초기 상태를 설정해주는 메서드. 생성자는 클래스 내에 하나만 존재해야 한다. constructor구문을 사용해 설정한다. 

 

접근자(getter)와 설정자(setter)

- 접근자: 객체 속성에 접근할 때 호출하는 메서드이다. get 구문을 사용해 설정하며, 매개변수를 가질 수 없다. 

- 설정자: 객체 속성에 할당할 때 호출하는 메서드이다. set 구문을 사용해 설정하며, 최대 한 개의 매개변수만 가질 수 있다. 

//클래스 선언
class Person {
    //생성자
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    //접근자
    get age(){
    	return this._age;
    }
    //설정자
    set age(value){
        if(value < 1){
            console.log("나이는 1이상의 값이어야합니다.")
        }
        this._age = value;
    }
}

//클래스 객체 생성
const person1 = new Person("lily", 25); 
const person2 = new Person("amy", 0); //콘솔에 "나이는 1이상의 값이어야합니다." 출력됨

 

 

 

클래스 상속 - extends

extends 키워드를 통해 클래스의 자식 클래스를 만들 수 있다. 

//부모 클래스
class Shape {
    constructor(height, width){
        this.height = height;
        this.width = width;
    }
}

//자식 클래스1 Triangle
class Triangle extends Shape{
    calcArea(){
        return this.height * this.width / 2;
    }
}

//자식 클래스2 Rectangle
class Rectangle extends Shape{
    calcArea(){
        return this.height * this.width;
    }
}


const tri = new Triangle(5, 10);
const rec = new Rectangle(5, 10);
tri.calcArea(); // 25
rec.calcArea(); // 50

 

부모 클래스 메서드 호출 - super

super 키워드를 통해 자식 클래스에서 부모 클래스의 메서드를 호출할 수 있다. 

class Book {
	constructor(name, author, price){
    	this.name = name;
        this.author = author;
        this.price = price;
    }
    calcSaledPrice(percent){
    	return this.price / 100 * (100 - percent);
    }
}

class UsedBook extends Book {
    constructor(name, author, price){
    	super(name, author, price)
    }
    finalPrice(){
        return `${this.name}의 판매가는 ${super.calcSaledPrice(20)}원 입니다.`
    }
}

const usedbook1 = new UsedBook("Snow White", "Brothers Grimm", 10000);
//'Snow White의 판매가는 8000원 입니다.' 콘솔 출력

 

 

 

 

---

참고 자료

MDN docs https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

코어 자바스크립트 https://ko.javascript.info/class