클래스 구문 기본

이해하기 아주 좋은 사진이 있어서 가져왔다!

 

클래스 vs 함수 비교

// 방법1: 함수를 사용한 방식
function Sword(name, color, damage) {
  this.name = name;
  this.color = color;
  this.damage = damage;
}

// 방법1의 메소드
function.prototype.attack = function() {
  // 공격
}

function.prototype.defend = function() {
  // 방어
}


// 방법2: 클래스 생성자를 사용한 방식
class Sword {
  constructor(name, color, damage) {
    this.name = name;
    this.color = color;
    this.damage = damage;
  }
  
  // 방법2의 메소드
  attack() {
    //공격
  }
  
  defend() {
    // 방어
  }
}

클래스의 인스턴스 메소드 vs 정적 메소드

class Student {
    constructor(name, year) {
        this.name = name;
        this.grade = year;
        this.tardies = 0;
        this.scores = [];
    }
    fullName() {
        return `학생의 이름은 ${this.name}입니다.`;
    }
    markLate() {
        this.tardies += 1;
        if (this.tardies >= 3) {
            return "퇴학!"
        }
        return `${this.name}은(는) ${this.tardies}번 지각했습니다.`;
    }
    addScore(score) {
        this.scores.push(score);
        return this.scores
    }
    calculateAverage() {
        let sum = this.scores.reduce(function (a, b) { return a + b; })
        return sum / this.scores.length;
    }
    static EnrollStudents() {
        return "학생이 입학했습니다."
    }

}

let firstStudent = new Student("이승재", 1);
let secondStudent = new Student("정창원", 2);

static 메소드는 클래스 인스턴스를 통해 호출될 수 없음.

firstStudent.EnrollStudents() 를 호출하면 타입에러가 발생함. => Student.EnrollStudents() 로 호출해야 함

정적 메소드 실사용 예제

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2)); // 7.0710678118654755

슈퍼클래스

생성자에서의 super

class Party {
  constructor(name) {
    this.name = name;
  }
}

class Department extends Party {
  #staff;
  constructor(name, staff) {
    super(name);  // 여기서 Party 클래스의 생성자를 호출합니다.
    this.#staff = staff;
  }
}

서브클래스의 생성자에서 super는 슈퍼클래스의 생성자를 호출한다. 서브클래스의 생성자에서는 this를 사용하기 전에 반드시 super를 호출해야 한다. 

메서드에서의 super

class Party {
  greet() {
    console.log(`Hello from ${this.name}`);
  }
}

class Department extends Party {
  greet() {
    super.greet();  // 여기서 Party 클래스의 greet 메서드를 호출합니다.
    console.log('This is a department.');
  }
}

const dept = new Department('HR');
dept.greet();
// 출력:
// Hello from HR
// This is a department.

오버라이딩된 메서드에서 원래의 메서드를 호출할 수 있다.

컴포지션

여러 서브 클래스에 상속을 사용할 경우 상속이 조금 맞지 않는 경우라든가 여러개를 상속시킬 수 없다는 문제가 있음

그 경우 컴포지션을 이용해 유연하게 클래스를 사용할 수 있음

class Animal {
  #soundBehavior;
  constructor(soundBehavior) {
    this.#soundBehavior = soundBehavior;
  }

  makeSound() {
    this.#soundBehavior
      ? this.#soundBehavior.makeSound()
      : console.log("알 수 없는 소리!");
  }
}

class DogSound {
  makeSound() {
    console.log("멍멍!");
  }
}

class CatSound {
  makeSound() {
    console.log("야옹!");
  }
}

class CowSound {
  makeSound() {
    console.log("음메!");
  }
}

const animals = [
  new Animal(),
  new Animal(new DogSound()),
  new Animal(new CatSound()),
  new Animal(new CowSound()),
];
animals.forEach((animal) => animal.makeSound());