Class

자바스크립트에서 객체를 다루는 것은 , 원론적인 객체, 함수 뿐이 아닌 'Class' 역시 존재한다. 자바스크립트에서의 클래스는 ES5와 의미, 문법이 다르며, 프로토타입을 이용해서 만들어졌다.

Class?

MDN : Class는 함수로써 존재한다. 그러므로 표현식과 선언 두 가지를 함께 갖는다.

함수는 선언 및 할당 단계에서 'new'를 붙임으로써, 함수의 역할을 객체의 지칭자로써 그 역할을 다르게끔 해준다.

Class 객체에서는 Constructor가 그 역할과 유사하다. Class로 생성된 객체 내에서 존재하는 특수한 메소드이며, 이 메소드는 클래스당 한 개씩 존재한다. Constructor가 여러개 존재하면 그것은 구문 에러를 발생시킨다. 참고로 Constructor는 '건설자'라는 뜻이다.

선언에서의 특징

함수 선언과 크게 다른 점은 클래스 선언은 호이스팅이 일어나지 않는다. 그렇기에 선언이 된 후 , 재정의 , 호출을 하여야한다.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

// => MDN , 할당이 선언보다 위에있다.

표현식에서의 특징

Class는 그 표현식이 이름을 갖거나, 갖지 않을 수 있다.

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output : "Rectangle"


// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output: "Rectangle2"

// => MDN , 무명 클래스를 할당받은 Rectangle 변수를 호출하면, 그 프로퍼티인 name은 그대로 물려받아 Rectangle을 갖는다. 반면 유명 클래스 Rectangle2를 할당받은 변수 Rectangle의 name 프로퍼티를 호출한다면, Rectangle2가 나온다.

Getter,Setter

Class에서는 Getter, Setter를 이용하여, 클래스 내부의 값을 논리적으로 변환하여, 특정 파라미터에 논리를 부여할 수 있다. 또는 값의 형을 새로이 추가할 수 있다.

// test getter and setters

class Person { // named class 선언
  constructor(name, interests, age) {
    //params 표현
    this.name = name;
    this.interests = interests;
    this.age = age;
  }

  get age() {

    // return this.age; ,콜스택 무한반복을 방지하기 위해 변수의 이름을 다르게 설정

    return this._age;
  }
  // get이라는 키워드를 이용해서 값을 리턴 , 따라서 return this.age;
  // getter 정의 순간 . this.age 메모리에 올라가있는 데이터를 읽어오지 않고, getter를 호출



  set age(value) {

    //this.age = value;   , 콜스택 무한반복을 방지하기 위해 변수의 이름을 다르게 설정


    this._age = value < 0 ? 0 : value;
  }
  // set이라는 키워드를 이용해서 값을 설정
  // setter 정의 순간 . 할당되는 age의 메모리 상 데이터값을 가져오지않고, setter를 호출

}

const yeonkor = new Person(`Yeonkor`, `workout`, `-19`);

console.log(yeonkor.age);

//=> 0;

extends를 통한 클래스 상속(sub classing)

extends 키워드는 클래스 선언이나 클래스 표현식에서 다른 클래스의 자식 클래스를 생성하기 위해 사용된다.자식 클래스에 constructor가 있다면, "this"를 사용하기 전에 가장 먼저 super 키워드를 사용하여 부모 클래스의 함수값을 가져온다.

class Ordo { //부모 클래스 생성
  constructor(inyears) {
    this.inyears = inyears; 
  }

  wishes() {
    console.log(`${this.inyears} , i will take it `);
  }
}

class Years extends Ordo { // Ordo클래스의 자식 클래스 Years 생성 
  
  constructor(inyears) { 
    super(inyears); // Super를 통해 부모 클래스의 파라미터를 받아옴, inyears 파라미터를 통해, 부모 클래스의 생성자 호출 
  }

  wishes() {
    console.log(` in ${this.inyears}, years who makes results is Yeonkor`);
  }
}

let y = new Years(5);

// 부모 클래스의 constructor에 할당된 this.inyears가 자식 클래스로 그대로 전달

y.wishes();

// => in 5, years who makes results is Yeonkor