[JavaScript] class 명령

📔 클래스 정의하기 - class 명령

class 클래스명 {
	생성자의 정의
    프로퍼티의 정의
    메소드의 정의
}                           // class 명령

메소드명(인수, ...) {
	메소드의 본체
}                           // 메소드 정의

constructor() {
	this.프로퍼티명 = 값
}                           // 생성자 정의

*예시*

class Member {
    //생성자
    constructor(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
    }

    //메소드
    getName() {
        return this.lastName + this.firstName;
    }
}
let m = new Member('시온', '정');
console.log(m.getName()); //결과 : 정시온

🔹 this

• 생성자에 의해 생성되는 인스턴스(자기자신)을 나타내는 것
• this 키워드에 대해 변수를 지정함으로써 인스턴스의 프로퍼티를 설정 할 수 있다.

🔹클래스는 function 생성자와 다르다.

• 함수로서 호출할 수 없다.

let m = Member('시온', '정');//new 연산자가 없다
//결과 : Class constructor Member cannot be invoked without 'new'

• 정의하기 전의 클래스를 호출할 수 없다.

let m = new Member('시온', '정');
// 결과 : Member is not defined
class Member{ ...생략...}

🔹프로퍼티 정의하기

get 프로퍼티명 {
	값을 취득하기 위한 코드     // 값 return
}

set 프로퍼티명(value) {
	값을 설정하기 위한 코드     // 값 설정
}

class Member {
    //생성자
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

    //firstName 프로퍼티
  get firstName() {
    return this._firstName;
  }

  set firstName(value) {
    this._firstName = value;
  }

    //lastName 프로퍼티
  get lastName() {
    return this._lastName;
  }

  set lastName(value) {
    this._lastName = value;
  }

  getName() {
    return this.lastName + this.firstName;
  }
}

let m = new Member('시온', '정');
console.log(m.getName());//결과 : 정시온

: getter를 정의하는 순간 this.firstName는 getter를 호출
setter를 정의하는 순간 '= firstName' 값을 할당 할 때 setter를 호출
그 말은, 전달 된 value를 this.firstName에 할당 할 때 다시 setter를 호출 즉, 무한정 반복 = call stack size exceeded 에러가 뜬다.
➡ getter와 setter안에 변수를 '_'를 이용하여 만들어야 한다.

🔹정적 메소드 정의하기(static)

• 들어오는 데이터 상관없이 공통적으로 class에서 쓸 수 있는 메소드

class Area {
  static getTriangle(base, height) {
    return base * height / 2;
  }
}

console.log(Area.getTriangle(10, 5));// 결과 : 25

🔹기존 클래스 계승하기

• extends 키워드를 이용하여 기존 클래스를 계승한 서브 클래스를 정의할 수 있다.

class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getName() {
    return this.lastName + this.firstName;
  }
}
//Member 객체를 계승한 BusinessMember 클래스를 정의
class BusinessMember extends Member {
  work() {
    return this.getName() + '은 공부하고 있습니다.';
  }
}

let bm = new BusinessMember('시온', '정');
console.log(bm.getName());
console.log(bm.work());

🔹기본 클래스의 메소드 / 생성자 호출하기 - super 키워드

• 기본 클래스에 정의된 메소드/ 생성자를 서브 클래스에서 재정의 = 오버라이드
• 오버라이드시, 기본 클래스의 기능을 완전히 재작성 하는 것 만은 아니며 이어 받으며 나머지만 추가하는 경우도 있다. 이럴 경우 super 키워드를 참조

super (args, ...)     // 생성자
super.method (args, ...)   // 메소드

//Member 클래스에 정의된 생성자/getName 메소드를 BusinessMember 클래스에서 오버라이드 하는 예시
class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getName() {
    return this.lastName + this.firstName;
  }
}

//Member 객체를 계승한 BusinessMember 클래스를 정의
class BusinessMember extends Member {
    // 인수로 clazz를 추가
  constructor(firstName, lastName, clazz) {
    super(firstName, lastName);
    this.clazz = clazz;
  }

    // 직책 포함의 이름을 반환하도록 수정
  getName() {
    return super.getName() + '／직책:' + this.clazz;
  }
}

let bm = new BusinessMember('성룡', '김', '과장');
console.log(bm.getName());// 결과 : 김성룡 / 직책 : 과장```