[JS] 클래스(Class) 기본 문법과 상속

안녕하세요 Foma💻 입니다!

 

이번 글도 역시 모던 자바스크립트에서 배운 '클래스'를 제가 이해한 방식으로 복습하는 차원에서

 

정리해보려고 합니다.

 

바로 시작할게요~

---

클래스란?

 

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. - 위키 백과 -

 

즉, 클래스는 객체를 만들기 쉽게 미리 틀을 만들어 놓는 것입니다.

---

클래스 생성하기

 

앞에 클래스를 붙여준 뒤 constructor(생성자)를 이용해서 초기화 해준다.

 

메서드나 프로퍼티를 생성하거나 추가하는 법은 일반 객체를 만들 때와 동일하다.

 

 class Player {
    constructor(name) {
      this.height = 180
      this.name = name
    }

    jump(space) {
      this.height += space
      console.log(`${this.name}이 점프를 하여 ${this.height}가 되었습니다.`)
    }

    run() {
      console.log(`${this.name}이 뛰고 있습니다.`)
    }
  }

---

클래스 상속받기

 

클래스를 상속받는 방법은 클래스 이름 뒤에 extends를 붙이고 상속받을 클래스 를 채택하면 됩니다.

 

일반 함수로 만든 객체와 같이 부모가 가지고 있는 메서드를 사용할 수 있습니다.

 

 //extends를 사용하여 상속받음
  class BasketBallPlayer extends Player {
    shoot() {
      console.log("Shoot")
    }
  }
  //BasketBallPlayer는 생성자가 없더라도 부모가 있기 때문에 가능하다.
  let basket = new BasketBallPlayer("Jordan")
  //부모가 있는 메서드를 그대로 사용가능
  basket.jump(50)

---

클래스와 일반 함수 다른점

 

위에서 살펴보면 클래스로 객체를 만드나 일반 함수로 객체를 만드나 똑같은 것처럼 느껴진다.

 

하지만 클래스는 일반 함수로 만드는 것과는 다른 점이 몇 가지 있다.

 

1. 클래스는 호출할 수 없다.

 

클래스로 만든 객체를 호출하면 에러가 발생한다.

 

function Person {...}
Person() //OK

class User {...{
User() //ERROR

 

2. 출력 시 클래스 이름으로 출력됨

 

console.log(User) //[class User]
console.log(Person) //[Function: Person]

 

3. 클래스 안의 메서드는 열거할 수 없다.

 

일반 함수로 만든 객체의 프로퍼티를 열거하면 메서드까지 열거할 수 있지만 클래스는 그렇지 않다.

 

그 이유는 클래스의 enumerable 프로퍼티 플래그가 false로 되어있기 때문이다.

 

for (let i in user) {
    console.log(i) 
}
    /*
    uid
    name
    age
    */
    
for (let i in person) {
    console.log(i) 
}
    /*
    uid
    name
    age
    getInfo
    */

---

클래스 필드 바인딩된 메서드 만들기

 

setTimeout 등의 메서드로 만들면 this가 사라져버려서 undefined가 된다.

 

 

undefined되는 이유는 컨텍스트를 잃어버리기 때문인데 setTimeout은 this에 window를 할당해서 window객체엔 해당 프로퍼티가 없기 때문이다.

이것을 해결하기 위해선 화살표 함수를 통해 래퍼 함수를 전달해준다. (함수 바인딩)

 

class Button {
    constructor(value) {
      this.value = value;
    }
  
    click() {
      console.log(this.value);
    }
  }
  
  let button = new Button("안녕하세요.");
  setTimeout(button.click, 1000); // undefined

//이것을 해결하기 위해선 화살표 함수를 통해 래핑을 해줘 함수를 전달하면 된다.
class AnotherButton {
    constructor(value) {
      this.value = value;
    }

    click = () => {
      console.log(this.value);
    }
  }

  let button1 = new AnotherButton("하이")
  setTimeout(button1.click,1000) //하이

---

동적으로 클래스 만들기

 

함수를 이용해서 동적으로 클래스를 생성할 수 있다.

 

function makePerson() {
    return class {
      walk() {
        console.log("walk")
      }
    }
  }

 

함수를 이용해서 상속도 가능하다.

 

class P extends makePerson() {}
let p = new P()
p.walk() //walk

---

오버라이딩

 

메서드 오버라이딩

 

서브클래스 또는 자식 클래스가 자신의 슈퍼클래스들 또는 부모 클래스들 중 하나에 의해 이미 제공된 
메소드를 특정한 형태로 구현하는 것 - 위키 백과 -

 

즉, 부모 클래스에서 이미 구현된 메서드를 자식 클래스에서 바꾸는 것입니다.

 

super.메서드이름(파라미터)를 작성하고 이후에 추가해줄 메서드를 구현해주면 됩니다.

 

class ValleyBallPlayer extends Player {
    spike() {
      console.log("Spike")
    }
    jump(space) {
      super.jump(space)
      this.spike()
    }
  }

 

생성자 오버라이딩

 

만약 부모가 생성자가 있고 자식의 생성자를 다르게 구현하고 싶다면 아래와 같이 super(파라미터)를 작성해야 합니다.

 

 class FootBallPlayer extends Player {
    constructor(name,shoeSize) {
      //부모가 있는 생성자는 super를 써줘야함.
      super(name)
      this.shoeSize = shoeSize
    }
  }

 

---

Reference

 

모던 JavaScript 튜토리얼