[javascript] Class

ES6에 추가된 문법이지만 완전히 새로운 문법은 아니고 기존의 문법을 쓰기 편하게
class라는 것을 추가한 것이라고 한다

class는 class키워드로 정의되고 프로퍼티와 메소드를 가질 수 있음

class person {
  name : "haha'
  call = () => {...}

메소드는 클래스에 정의한 함수이고 프로퍼티는 클래스나 객체에 정의한 변수를 말한다

new 키워드로 클래스의 인스턴스를 생성함
예를 들자면 class가 붕어빵틀 같은 것이고 인스턴스가 class로 찍어낸 객체 즉 붕어빵 같은 것이다
그래서 클래스를 가지고 자바스크립트 객체를 생성할 수 있다(객체 찍어내는 기계라고 생각)

const myPerson = new Person()
myPerson.call()
console.log(myPerson.name);

위와 같이 사용한다

class Person extends Master

말 그대로 확장한다는 뜻의 extends을 써서 위의 예시에서 보자면 Master 클래스를 상속받는 다는 뜻으로 볼 수 있다
이렇게 다른 클래스에 있는 프로퍼티와 메소드를 상속하면 잠재적으로 새로운 프로퍼티와 메소드를 추가한다는 뜻이다

class Person {
  constructor() {
    this.name = 'haha';
    this.gender = 'female'
  }
  printMyName() {
    console.log(this.name);
  }
}


const person =  new Person();
person.printMyName() // 'haha' 출력

기본적으로 클래스는 요렇게 사용을 하는데 클래스안에 프로퍼티와 메소드를 넣을 수 있고 person이라는 상수에 할당해서 클래스 Person 안에 있는 메소드를 간단하게 호출할 수도 있다

클래스도 상속을 받을 수 있는데 다음과 같이 받을 수 있다

class Human {
  constructor() {
    this.gender = 'female';
  }
  printGender() {
    console.log(this.gender)
  }
}

class Person extends Human {
  constructor() {
    this.name = 'haha';
    this.gender = 'female'
  }
  printMyName() {
    console.log(this.name);
  }
}

const person =  new Person();
person.printMyName() // 'haha' 출력
person.printGender() // 

Human이라는 클래스를 새로 만들고 Person 클래스에 extends를 붙여 Human을 상속해줬다
그래서 이제부터는 Person 클래스에서도 클래스 Human이 가지고 있는 프로퍼티와 메소드를 사용할 수 있다(여기선 this.gender라는 프로퍼티와 pringGender라는 메소드)
근데 person.printName을 찍어보면 에러가 난다
왜일까?
바로 서브클래스에서는 super생성자를 먼저 호출해야되기 때문이다
만약 다른 클래스를 확장하고 생성자를 실행한다면 super()를 붙여줘야함

class Human {
  constructor() {
    this.gender = 'female';
  }
  printGender() {
    console.log(this.gender)
  }
}

class Person extends Human {
  constructor() {
    super()  // ******
    this.name = 'haha';
  }
  printMyName() {
    console.log(this.name);
  }
}

const person =  new Person();
person.printMyName() // 'haha' 출력
person.printGender() // female

super는 키워드이고 상위 클래스의 생성자함수를 실행(위의 예시에선 constructor() { this.gender = 'female';}을 얘기함)한다

그런데 만약 Person클래스에도 genrder라는 프로퍼티를 만들면 어떻게 될까?

class Human {
  constructor() {
    this.gender = 'female';
  }
  printGender() {
    console.log(this.gender)
  }
}

class Person extends Human {
  constructor() {
    super()  // ******
    this.name = 'haha';
    this.gender = 'male'
  }
  printMyName() {
    console.log(this.name);
  }
}

const person =  new Person();
person.printMyName() // 'haha' 출력
person.printGender() // 'male'

person.printGender()를 했더니 'male'이 출력되었다
Human틀래스에 있는 printGender()를 호출했지만 person클래스에서 확장되었기 때문이다

클래스는 리액트에서 컴포넌트를 생성할 때 사용된다

최신 문법
위의 예시들에선 constructor라는 생성자함수를 사용했는데
ES7부터는 클래스에 바로 프로퍼티를 할당할 수 있다
예를 들면 다음과 같다

//ES6
constructor() {
    this.gender = 'female';
}

//ES7
gender = 'female'

이제 생성자 함수를 호출하지 않아도 된다

//ES6
printMyName() {어쩌구}

//ES7
printMyName = () => {어쩌구}  

화살표함수를 사용하기 때문에 this 키워드를 사용하지 않아도 되고 이게 바로 이 구문을 사용하는 이유이다
근데 내가 배운 걸로는 화살표 함수도 ES6문법이라고 알고 있는데 음 뭘까

class Human {
    gender = 'female';
  }
  printGender = () => {
    console.log(this.gender)
  }
}

class Person extends Human {
    name = 'haha';
    gender = 'male'
  }
  printMyName = () => {
    console.log(this.name);
  }
}

const person =  new Person();
person.printMyName() // 'haha' 출력
person.printGender() // 'male'

좀 더 보기 깔끔하고 적기에도 편해졌다
앞으로 이렇게 써야겠다