클래스와 인스턴스

---

클래스(class)와 인스턴스(instance)란?

• 객체 지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 하나의 모델이 되는 청사진이 클래스(class)이고, 그 청사진을 바탕으로 만들어진 것이 객체이면서 그 클래스의 인스턴스(instance)가 된다.

1. 클래스(Class)

---

• 함수가 특정 기능을 하는 구문(알고리즘, 로직)을 묶을 때 사용하는 문법이라면, 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관 있는 변수와 함수만을 선별해 하나로 묶을 때 사용하는 문법이다.
• 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 탬플릿으로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.
• 클래스는 class라는 키워드를 사용하여 생성하고, 일반적인 다른 함수와 구분하기 위해 보통 대문자로 시작하며 일반명사로 만든다.

• 기본 문법

// 함수를 이용한 'ES5' 방식
fucntion MyClass(속성) {
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}
// class 키워드를 이용한 'ES6' 방식
class MyClass {
  constructor(속성) { ... }  // 생성자 메서드
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

// 파라미터를 전달하지 않고 value값을 하드코딩한 경우 value값 그대로 반환
function Student() { // 클래스
    this.name = 'name';
    this.age = 'age';
    this.grade = 'grade';
}

let kim = new Student()
console.log(kim)  // {name: 'name', age: 'age', grade: 'grade'}

1) 클래스의 상속(Class Inheritance)

1-1. extends

• 클래스를 상속하여 현재 클래스를 다른 클래스로 확장한다.

• 기본 문법

class [Child Class name] extends [Parent Class name] {
...}

// 부모 클래스 Animal 생성
class Animal {
  constructor(name) {
    this.name = name;
    this.speed = 0;
  }
  run(speed) {
    this.speed = speed;
    return `${this.name} 은/는 속도 ${this.speed}로 달립니다.`;
  }
  stop() {
    this.speed = 0;
    return `${this.name} 이/가 멈췄습니다.`;
  }
}

// 클래스 Rabbit을 사용해 만든 객체는 rabbit.hide() 같은 Rabbit에 정의된 메서드에도 접근할 수 있고,
// rabbit.run() 같은 Animal에 정의된 메서드에도 접근할 수 있다.
// Animal을 상속받는 자식 클래스 Rabbit 생성
class Rabbit extends Animal {
  hide() {
    return `${this.name} 이/가 숨었습니다!`;
  }
}

let rabbit = new Rabbit("흰 토끼");

rabbit.run(5);  // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide();  // 흰 토끼 이/가 숨었습니다!

1-2. super

• super는 자신의 부모 클래스의 생성자를 호출하는 역할을 하며, 바로 위의 부모 클래스만이 아니라 부모의 부모나, 그 부모의 부모 클래스의 생성자까지 모두 호출한다.
• super는 extends로 상속된 부모 클래스의 constructor()'를 의미한다.
• 생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출한다.
• 생성자 함수 내에서 쓰일때는 super 키워드는 한번만 사용될 수 있다.
• this 키워드가 사용되기 전에 사용되어야 하며, 그렇지 않을 경우 Reference Error가 발생한다.

• 기본 문법

super(속성);  // 부모 생성자 호출
super.호출할 부모 메서드(속성);

// 부모 클래스 Person 생성
class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
  sum() {
    return this.first + this.second;
  }
}

// 자식 클래스 PersonPlus 생성
class PersonPlus extends Person {
// 부모 클래스의 속성을 사용하기 위해서는 constructor와 super에 속성을 넣어주어야 한다.
// 부모 클래스의 생성자 name, first, second를 불러오고 추가로 third를 신규 생성
  constructor(name, first, second, third) {
    super(name, first, second);  // 부모 클래스의 Constructor 값을 호출
    this.third = third;  // 현재 클래스인 PersonPlus 클래스에 할당
  }
  sum() {
    return super.sum() + this.third;  // 부모 클래스의 메서드인 sum() 호출
  }
  avg() {
    return (this.first + this.second + this.third) / 3; // PersonPlus 클래스의 메서드
  }
}

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

2. 인스턴스(Instance)

---

• 인스턴스는 클래스의 속성과 메서드를 담고 있는 객체이다. (클래스로 만든 객체 === 인스턴스)
• new 키워드를 통해 클래스의 인스턴스를 생성할 수 있으며, 이렇게 생성된 인스턴스는 클래스의 고유한 속성과 메서드를 가지게 된다.
• 파라미터들은 클래스를 정의할 때 설정했던 파라미터를 그대로 가져온다.

• 기본 문법

new 정의한 클래스명

// 아래 클래스의 속성은 name, age, grade이고, 메서드로는 study(), rest()가 있다.
// ES5 방식
function Student(name, age, grade) { // 클래스
    this.name = name;
    this.age = age;
    this.grade = grade;
}
// ES5 방식에서는 'prototype' 키워드를 사용해야 메서드를 정의할 수 있다.
Student.prototype.study = function () {  // 메서드
    return `${this.age}살 ${this.name}이(가) 공부를 시작했습니다.`
}
Student.prototype.rest = function () { // 메서드
    return `${this.age}살 ${this.name}이(가) 휴식을 취하고 있습니다.`
}

// ES6 방식
class Student { // 클래스
	constructor(name, age, grade) {  // 생성자 메서드
		this.name = name; 
		this.age = age;
		this.grade = grade;
	}
	study() { // 메서드
		return `${this.age}살 ${this.name}이(가) 공부를 시작했습니다.`
	}
	rest() { // 메서드
		return `${this.age}살 ${this.name}이(가) 휴식을 취하고 있습니다.`
	}
}

// new 키워드를 통해 클래스의 인스턴스 생성
let kim = new Student("소라", 15, "중학생");  // 인스턴스
console.log(kim)  // {name: '소라', age: 15, grade: '중학생'}

let han = new Student("송이", 17, "고등학생");  // 인스턴스
console.log(han). // {name: '송이', age: 17, grade: '고등학생'}

// kim과 han 인스턴스에는 Student 클래스의 속성과 메서드를 가지고 있다.
kim.name  // 소라
han.age  // 17
console.log(kim.study())  // 15살 소라이(가) 공부를 시작했습니다.
console.log(han.rest())  // 17살 송이이(가) 휴식을 취하고 있습니다.