자바스크립트 ES class

자바스크립트 자체에는 Class 가 없다. 대신 prototype을 이용한 클래스 흉내내기가 있는 것이다. prototype은 확실히 다른 객체지향 언어인 JAVA같은 것과는 다르다.

그런데 뻘짓을 하며 찾아보다 보니.. 자바스크립트 class도 존재한다는것을 알게됬다. 정말 자바스크립트 안에 완전하게 있는 건 아니고, ECMAScript라는 자바스크립트 문법 추가버전에서 사용이 가능한 기능이다.

(이런거 IE가 반영할 일은 없으니 IE 쓸 생각은 때려치워라.)

---

자바스크립트 Class

class 클래스명 { 내용 }

위와 같이 쓰면 class 생성이 끝난다. ES에는 class 라는 키워드 자체가 추가되어서, 저런식으로 정확하게 "이것이 클래스다" 라고 말해줄 수 있다.

그리고 일반적으로 JS에서 만드는 function 클래스와는 다르게 무조건 new를 사용해야만 한다. 그렇지 않으면 오류가 난다.

class phone {
  constructor(name){
    this.name = name;
  }
}
 
let myPhone = new phone("잼잼");
console.log(myPhone.name)

그리고 class 에서는 그냥 단순 함수인 prototype과는 다르게, 각종 함수들을 끼워넣는 방식으로 만든다. 클래스 내에 있는 함수들은 function 연산자 없이 함수명만 써주면 된다.

그중에, constructor 라는 함수는 "생성"을 했을 때 호출되는 함수다. new 연산자를 이용해서 호출했을때, 저 함수가 호출된다.

저기에서 초기화 할 함수들은 초기화해주면 되겠다.

이런식으로 "잼잼" 이 뜬다. constructor 함수에서 this.name을 잼잼 으로 만들었기 때문이다.

class phone {
  constructor(name){
    this.name = name;
  }
  static canPlayGame(){
    return true;
  }
}
 
let myPhone = new phone("잼잼");
console.log(myPhone.name);
console.log(phone.canPlayGame());

또, 정적 멤버를 만들어 둘 수도 있다. 단순히 함수 앞에 "static" 키워드를 붙이면 된다. 그러면 이제 클래스명.멤버명 으로 바로 접근할수 있는 정적 함수가 된다.

여기서 주의할 점은! class에서 생성된 "객체" 로는 정적 함수에 접근할 수 없다. 무조건 class에서 바로 접근해야 한다.

class phone {
  constructor(name){
    this.name = name;
  }
  static get canPlayGame(){
    return true;
  }
}
 
let myPhone = new phone("잼잼");
console.log(myPhone.name);
console.log(phone.canPlayGame);

이렇게 여러 키워드를 중첩시킬수도 있다. static과 get을 사용해서, 변수에 접근하려고 할때 true를 반환시키게 한다.

class A extends Array {}
 
let myA = new A;
 
myA.push("one");
myA.push("2");
myA.push("삼");

역시 클래스! 클래스답게, 리얼 상속도 가능하다.

자바랑 마찬가지로 extends 키워드를 쓰고 뒤에 상속받을 클래스명을 쓰면 상속받게 된다. 위 예제에서는 Array 라는 기본클래스를 상속했는데, 이렇게 할 경우 마치 array 인 것 처럼, push 함수도 이용할 수 있고 배열이 만들어진다.

여기에 마음대로 기능을 넣고 빼고 할수 있다.

---

주의할 점

주의할 점이 떠오른게 딱 하나 있는데, 바로 "호이스팅" 관련 문제다. 일반적으로 우리가 사용하는 function은 하나의 스크립트 더미에서 위에 있던 아래에 있던 가장 상단에서 정의한것처럼 만들어버린다. 아래에서 선언을 해도 그 위에서 접근이 가능하다는것.

하지만 class는 다르다. 무조건 사용되기 전에 선언을 해야 된다.

이런점만 주의한다면, class 사용하는데 큰 무리는 없을 것이다. 앞으로는 이런 최신 구문을 사용해서 클래스를 만들어보자!!

+