1-5. Class(클래스)

-Class

(Javacsript에서도 ES6부터 클래스 형태를 제공해 사용할 수 있다.)

 

리액트를 하다보면 사용할 수 도 있는 기능이지만 클래스 자체를 깊게 이해할 정도의 필요는 없다!

어떻게 작동하는지에 대해서만 이해하도록 하자.

class Baseball {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }
}

 

Baseball 이라는 클래스를 작성했고, 생성자를 통해 name 과 position을 전달해 Baseball에서 사용할수 있도록 했다.

this는 이 클래스(Baseball)을 의미한다.

 

Baseball Class를 어떻게 사용할 수 있을까?

const player = new Baseball("Park", "1st");
console.log(player);

const player = new Baseball("Park", "1st"); console.log(player);

new라는 키워드, 그리고 constructor의 파라미터로 전달했던 속성값들을 함께 전달하면

name: Park, position: 1st 를 갖는 Baseball 객체가 player라는 이름으로 생성된다.

constructor(생성자)는 Class를 생성할 때 필요한 것들을 가지고 있다.

 

확장 가능한 Class

class Baseball {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }
}

class Play extends Baseball {
  pitch() {
    console.log("pitch");
  }
}

const myPlay = new Play("Kim", "SS");
console.log(myPlay); 

 

새로운 클래스 Play는 extends 라는 키워드를 통해 Baseball의 속성을 그대로 사용할 수 있다.

따라서 Baseball과 마찬가지로 name, position 속성을 파라미터로 전달받았고 그 출력결과는 위와 같다.

 

또한, Play 내부에서 정의한 pitch 메서드도 사용할 수 있다.

const myPlay = new Play("Kim", "SS");
console.log(myPlay.pitch()); // pitch

 

위에서 말했듯, Play는 Baseball의 속성을 그대로 사용한다.

class Play extends Baseball {
  pitch() {
    console.log("pitch");
  }

  sayWhatAmI() {
    console.log(`I am ${this.name}, ${this.position}`);
  }
}

const myPlay = new Play("Kim", "SS");
console.log(myPlay.sayWhatAmI()); //I am Kim, SS

 

여기서의 this는 Baseball을 상속받은 Play를 의미한다.