클래스

자바스크립트 Class는 생성자함수를 생성하기위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다.

추상화란?
대상의 공통적인 특성을 뽑아내어 구체화한다는 의미로 해석된다.
https://black7375.tistory.com/6

es6이전에는 prototype 객체를 사용하여 생성자함수를 구현하였으나 es6이후부터는 클래스 표현식을 이용하여 생성자함수를 만들수있으며, prototype 코드보다 간결해졌다.

// ES6 예제
class Shape {
  static create(x, y) {
    return new Shape(x, y);
  }
  name = 'Shape';

  constructor(x, y) {
    this.move(x, y);
  }
  move(x, y) {
    this.x = x;
    this.y = y;
  }
  area() {
    return 0;
  }
}

var s = new Shape(0, 0);
var s1 = Shape.create(0, 0);
s.area(); // 0

함수를 사용하는것은 명백하게도 반복작업을 피하기위한것이며, 생성자 함수를 이용하여 객체를 생성하는 방법의 장점은 새로운 객체를 만들 때 초깃값을 전달하여 생성할 수 있다는 점이다.
ex) https://github.com/nolimits4web/Swiper/blob/master/demos/010-default.html

아래코드는 Shape 객체를 확장항 es6문법이다. Shape 클래스를 생성하고서 Circle 클래스로 확장할수도 있고 Circle클래스의 부모메서드인 move 메소드에도 접근가능한걸 확인할수있다.

// ES6 예제
class Shape {
    static create(x, y) {
        return new Shape(x, y);
    }
    name = 'Shape';

    constructor(x, y) {
        this.move(x, y);
    }
    move(x, y) {
        this.x = x;
        this.y = y;
        return x*y
    }
}


class Circle extends Shape {
    constructor(x, y, radius) {
        super(x, y);
        this.radius = radius;
    }
    area() {
        if (this.radius === 0) return super.area();
        return this.radius * this.radius;
    }
}

var c = new Circle(0, 0, 10);
console.log(c.move(2,2) )// 4
console.log(c.area() )// 100