0421_ javascript의 클래스

계기

1. 항해 99가 끝나고 지원 주차를 하면서 마음이 맞는 팀원과 함께 미니 프로젝트를 시작했다. 

2. 안 써봤던 기술을 사용하고 싶어 nest.js를 공부하기로 마음먹었다.

3. 클래스에 관심이 생겼다.

 

 

서론

 메인프로젝트를 진행하면서 중복된 코드를 어떻게든 줄이기 위해 계속 사용하는 로직은 함수로 만들어 계속 사용했다. 중복코드가 어느 곳에서 잘못 적용되거나 내 미친 손가락이 잘못 적었을 경우 불필요한 에러만 낳기 때문에 사람의 손가락을 믿지 말고 컴퓨터를 믿자는 취지로 그렇게 만들었다. 

 클래스도 그런 의미라고 생각한다. 가장 큰 이유는 재사용성을 높이고 효율을 증대시키는 것이다.

 

Class의 기본

자바스크립트의 거의 모든 것이 객체이다보니, Class도 선언만 하면 객체가 된다. 

 

1. 클래스 사용 순서

(1) 선언해서 객체화 

(2) Constructor (인스턴스 ... ) 이용 초기화

(3) 클래스 내부에 메서드 생성 -> 계속 사용


* 문법

- super : 부모가 가진 생성자와 메서드를 사용할 수 있다. 괄호
super.method() : 부모-class의 prototype-method를 참조
super(): 부모-class의 생성자(constructor)를 참조

* __proto__ 와 prototype 의 차이
(1) __proto__
- 모든 객체가 가지고 있다.
- 하나의 Link 라고 할 수 있다.
(2) prototype
- 함수 객체만 가지고 있다.
- 생성자를 가지는 원형으로 선언 할 수 있다.

* "prototype" 이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있습니다. 이런 메서드를 정적(static) 메서드라고 부릅니다.

 

2. 상속

상속을 받으면 자식 클래스는 부모클래스의 field를 사용할 수 있다. -> this. 를 사용해 지정하면 가져다가 사용 가능

super를 사용하면 부모클래스의 메서드를 불러올 수 있다. 

 

3. 예제코드

class sports {
  constructor(name, age, city) {
    this.name = name;
    this.r   
     = age;
    this.city = city;
  }
  nextYearAge() {
    return Number(this.age) + 1;
  }
}

class introducePerson extends Person {
  constructor(name, age, city, futureHope) {
    super(name, age, city);
    this.futureHope = futureHope;
  }
  introduce() {
    return `저는 ${this.city}에 사는 ${
      this.name
    } 입니다. 내년엔 ${super.nextYearAge()}살이며, 장래희망은 ${
      this.futureHope
    } 입니다.`;
  }
}
let kim = new introducePerson("kim", "24", "seoul", "개발자");

console.log(kim.introduce());