JavaScript

JavaScript : ES6 Class

jmeen 2021. 8. 30. 20:45
728x90

JavaScript : ES6 Class

기존 자바스크립트는 클래스 표현 식 없이 prototype으로 클래스를 다룸
- ES6에서는 클래스 정의 문법으로 클래스를 정의, 사용 가능
- constructor: 생성자
- static : 정적 멤버

- this : 객체 자신을 가리킴
- super : 부모객체를 가리킴

// 원래 Javascript는 object-based laguage
// 공유 영역인 Prototype 기반 상속
// es6에서는 class 문법이 추가 -> OOP 방식을 구현할 수 있다.

class shape {
    // 정적 메서드 : static으로 처리
    // new하지 않고도 클래스명.메서드 명으로 접근 가능.
    static create(x, y) { return new shape(x, y) }
    // 생성자 : constructor
    constructor(x, y) {
        this.name = "shape"; // 속성 : 앞에는 this 키워드를 붙인다.
        this.move(x, y);
    }
    // 메서드
    move(x, y) {
        this.x = x;
        this.y = y;
    }
    area() {
        return 0;
    }
}

let s = new shape(0, 0); // new를 이용한 인스턴스 생성
let s2 = shape.create(10, 20); // static메서드는 new없이 사용 가능.

console.log(s);
console.log(s.area());
console.log(s2, s2.area());
// 부모 클래스 상속 : extends
class Circle extends shape {
    // 생성자
    constructor(x, y, r) {
        super(x, y); // 부모 생성자 호출
        // 자신만의 속성 설정
        this.radius = r;
    }
    // 메서드 오버라이드
    area() {
        if (this.radius === 0) {
            return super.area(); // 부모의 메서드 호출
        }
        else {
            return this.radius **2 * Math.PI;
        }
    }
}

let c = new Circle(0,0,10);
console.log(c,c.area());