function 대신 class?? class 사용법과 활용

ES6 부터 function 으로 함수를 작성하는 것 대신

class 로 작성할 수 있게 되었다.

ex)

class Car {
  constructor() {
    this.name = name;
    this.color = color;
    this.price = price;
    this.maxSpeed = maxSpeed;
  }

  start() {
    console.log(`${this.name} 출발합니다.`);
  }
}

• Car 라는 클래스 속에 constructor메서드와 this를 이용해 속성을 작성해줄 수 있다.
• 또한~() 의 형식으로 매서드도 작성해 줄 수 있다.
• constructor 메서드는 같은 클래스 내에서 한번만 쓸 수있다.
• class 형태의 함수로 작성된 컴포넌트는 대문자로 시작해야 한다.

 

 

 

extends 매서드를 통해 상속할 클래스를 지정해 줄 수 있다.
ex)

class Human {
    constructor(name, age){
        this.name = name; 
        this.age = age;
    }
    sleep(){ return `${this.name}이(가) 잠을 잡니다.`}
}

class Student extends Human{
    constructor(name, age, grade){
        super(name, age);
        this.grade = grade;
    }
    study(num){
        this.grade = this.grade + num;
        return `${this.name}의 성적이 ${num}만큼 올라 ${this.grade}이 되었습니다.`
    }
}

• super키워드를 통해 앞서 지정해준 부모 클래스의 함수를 호출할 수 있다.
• .__proto__를 연속적으로 호출하면 앞의 프로토타입 체인 에서 말씀드린 것 처럼 javascript 내의 더 높은 클래스로 접근할 수 있다.
• 이렇게 연결시킨 클래스들은 부모 클래스의 모든 매서드를 사용할 수 있게 된다.
• 부모 클래스에 있는 속성과 자식 클래스에 있는 속성이 동일한 경우 오버라이딩 되어 자식의 속성을 따르게 된다.