3. class, super

class 란?

 

객체를 만드는 공장이다.

 

class Person {}

const kim = new Person();
console.log("kim", kim);

 

출력값

 

class 안에서 메소드 생성하기 

 

✅ 메소드 = 객체 안에서 생성된 함수 ! 

 

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return "prototype :" + (this.first + this.second);
  }
}

const kim = new Person("kim", 10, 20);
console.log("kim", kim);

 

위 코드는 다음 코드와 동일하다 

 

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

Person.prototype.sum = function() {
    return 'prototype :' + (this.first + this.second)
  }

const kim = new Person("kim", 10, 20);
console.log("kim", kim);

 

즉, prototype 을 생략해서 만드는 것이다 ! 

 

상속

 

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
  sum() {
    return "prototype : " + (this.first + this.second);
  }
}

class PersonPlus extends Person {
  avg() {
    return (this.first + this.second) / 2;
  }
}

const kim = new PersonPlus("kim", 10, 20);
console.log("kim", kim);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());

 

 

상속은 불필요한 코드 중복을 줄여준다.

extends 를 써서 사용할 수 있다.

 

super란?

 

새로운 기능을 도입해야할 때 사용하면 좋다.

 

슈퍼에 괄호가 있으면 부모클래스의 생성자, 괄호가 없으면 부모클래스 자체를 뜻한다. 만약 슈퍼라는 기능이 없으면, 자식클래스에서 부모클래스의 속성과 기능에 추가적인 무언가를 넣어 활용때 다시 부모클래스의 코드를 사용해야하는 중복이 발생할 것이다.

 

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
  sum() {
    return this.first + this.second;
  }
}

class PersonPlus extends Person {
  constructor(name, first, second, third) {
    super(name, first, second);
    this.third = third;
  }
  sum() {
    return super.sum() + this.third;
  }
  avg() {
    return (this.first + this.second + this.third) / 3;
  }
}

const kim = new PersonPlus("kim", 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());