제로초 자바스크립트 입문 <클래스>

클래스 

클래스 class 는 객체를 생성하기 위한 템플릿(서식)으로, ES2015에서 추가되었습니다

 

함수를 객체로 생성하는 방법 

• 객체를 동적으로 생성한다는 것은 객체를 미리 만들어 두지 않고 필요할 때마다 생성한다는 뜻이다
• 객체를 반환하는 함수를 만들면 되는데, 이런 함수를 공장 함수 (factory function) 라고 한다
• 함수를 호출할 때는 함수 이름 앞에 new를 붙인다
• new 를 붙여 호출할 때마다 새로운 객체가 생성

function Monster(name, hp, att) {
  this.name = name;
  this.hp = hp;
  this.att = att;
}

const monster1 = new Monster('슬라임', 25, 10);
const monster2 = new Monster('슬라임', 26, 9);
const monster3 = new Monster('슬라임', 25, 11);

• new 를 붙여 호출하는 함수를 생성자 함수 (constuctor function) 라고 한다
• 생성자 함수의 이름은 보통 대문자로 시작
• 필수는 아니지만, 자바스크립트 개발자들이 많이 사용하는 규칙 

function attack(monster) {
  monster.hp -= this.att;
}
    function createMonster(name, hp, att) { 
  return { 
    name, hp, att,
        attack,
      };
}
const monster1 = createMonster('슬라임', 25, 10);
const monster2 = createMonster('슬라임', 26, 9);
monster1.attack === monster2.attack; // true
monster1;

function Monster(name, hp, att) { 
  this.name = name;
  this.hp = hp;
  this.att = att; 
}
    Monster.prototype.attack = function(monster) {
  monster.hp -= this.att;
};
    const monster1 = new Monster('슬라임', 25, 10);
const monster2 = new Monster('슬라임', 26, 9);
    monster1.attack === monster2.attack; // true

• attack( ) 매서드에 프로토타입 prototype 이라는 새로운 속성
• 생성자 함수로 생성한 객체가 공유하는 속성
• 생성자 함수에서는 이처럼 프로토타입 속성 안에 메서드를 추가해야 매서드를 재사용 할 수 있다

this 이해하기

• this 는 상황에 따라 값이 달라진다
• this 는 기본으로 window 객체를 가리키니 그 외 경우에 어떤 값을 가지는지만 알아 두면 된다 
• this 가 어떤 경우에 window 객체가 아닌지 알아보자
  • 객체 매서드로 this 를 사용하면 this 는 해당 객체를 가리킨다
  • 단 메서드에 구조분해 할당을 적용하면 this 가 객체 자신을 가리키지 않으니 주의해야 한다 
  • 반드시 객체.매서드 (  ) 형태로 사용해야만 this 가 객체 자신이 된다 

const b = { 
  name: '제로초', 
  sayName() {
    console.log(this === b);
  }
};
b.sayName(); // true

• 함수의 this 는 bind( ) 메서드를 사용해 값을 바꿀 수 있다
• bind( ) 메서드는 자바스크립트에 내장된 메서드로 this 를 수정하는 역할을 한다
• 화살표 함수는 bind( ) 를 해도 this 를 바꿀 수 없다 
• this가 외부 요인 때문에 바뀌는 것을 원하지 않는다면 함수 선언문 대신 화살표 함수를 사용하면 된다
• 화살표 함수는 기존 this를 유지할 뿐 this 를 어떤 값으로 바꾸지 않는다 
• 생성자 함수를 호출할 때 new 를 붙이면 this 는 생성자 함수가 새로 생성 하는 객체가 된다 

---

클래스로 객체를 생성하는 방법

function Monster(name, hp, att) { 
  this.name = name;
  this.hp = hp; 
  this.att = att; 
}

class Monster {
  constructor(name, hp, att) { 
        this.name = name;
    this.hp = hp; 
    this.att = att; 
  }
    }

• class 예약어로 클래스를 선언하고, 생성자 함수 이름을 클래스 이름으로 넣는다
• 매개변수를 포함한 기존 함수의 코드는 constructor( ) 메서드 안에 넣으면 된다
• 객체와 마찬가지로 클래스 내부에 선언된 함수도 메서드라고 한다

class <클래스이름> {
  constructor(매개변수1, 매개변수2, ...) {
  // 생성자 함수 내용
  }
}

• 클래스에 new 를 붙여 호출하면 constructor( ) 메서드가 실행되고 객체가 반환
• 클래스 문법의 장점은 객체의 속성과 메서드를 하나로 묶을 수 있다는 점에 있다
• 생성자 함수와 메서드가 클래스 안에 한 덩어리로 묶여 있어서 보기 편하다 

class Monster {
  constructor(name, hp, att) { 
    this.name = name;
    this.hp = hp; 
    this.att = att; 
  }
      attack(monster) {
    monster.hp -= this.att;
  }
    }

 

클래스 상속하기 

• 클래스는 상속이 쉽다
• 공통되는 부분만 추려 새로운 클래스로 만든다
• 클래스는 새로운 클래스에서 공통부분을 가져와 사용한다
• 이를 상속 받는다고 표한한다
• 공통부분을 모아 만든 클래스를 부모 클래스, 상속받는 클래스를 자식클래스라고 한다
• 자식 클래스에서 부모 클래스를 상속 받을 때는 extends 라는 예약어를 사용한다

class Unit {
  constructor(name, hp, att) { 
    this.name = name; 
    this.hp = hp; 
    this.att = att;
  }
  attack(target) { 
    target.hp -= this.att;
  }
}

class Hero extends Unit {
      constructor(name, hp, att) {
        super(name, hp, att); // 부모 클래스의 생성자 메서드 호출
        this.maxHp = hp; // 그 외 속성
  }
      attack(target) {
    super.attack(target); // 부모 클래스의 attack() 메서드 호출
    console.log('부모 클래스의 attack() 외 추가 동작');
      }
  heal() { // 부모 클래스 메서드 외 동작
    this.hp = this.maxHp;
  }
}
    class Monster extends Unit {
      constructor(name, hp, att) {
        super(name, hp, att);
      }
      attack(target) {
    super.attack(target);
      }
}

• super( ) 함수는 부모 클래스 Unit 를 의미
• 즉, 부모 클래스의 constructor( ) 메서드에 인수를 전달하는 함수
• super( ) 함수가 호출되면 부모 클래스에서 자식 클래스 대신 name, hp, att 속성을 this 에 입력한다
• 공통 속성을 super( ) 함수로 처리한다

class <자식 클래스> extends <부모 클래스> {
  constructor(매개변수1, 매개변수2, ...) {
    super(인수1, 인수2 ...); // 부모 클래스의 생성자 호출
    this.매개변수 = 값; // 자식 클래스만의 속성
  }
  메서드() { // 부모 클래스의 메서드만 호출하면 생략 가능
    super.메서드(); // 부모 클래스의 메서드 호출
    // 부모 클래스 메서드 호출 이후의 동작
  }
  메서드(매개변수1, 매개변수2, ...) {
    // 자식 클래스만의 동작
  }
}