클래스

---

• 자바스크립트는 프로토타입 기반의 객체지향 언어지만, 클래스를 제공한다.
• ES6에서 추가된 클래스가 나오기전에는 비슷한 종류의 객체를 많이 만들어내기 위해 생성자 함수 를 사용해왔다.
• 오브젝트를 생성하기 위한 설계도
• new 키워드를 사용하여 return문 없이 새로운 객체를 반환 시킨다.

// 생성자 함수
const User = function (name, age) { 
  this.name = name;
  this.age = age;
  this.showName = function () {
    console.log(this.name);
  };
};

const mike = new User("Mike", 30);

// 클래스 
class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const tom = new User2("Tom", 19);

📌 Constructor

클래스에는 “생성자” 함수가 존재한다. new 연산자를 통한 클래스 오브젝트 생성시 최초로 동작하는 메소드이며, constructor라는 이름을 사용한다.

class Person {
  // constructor(생성자)
  constructor(name, age) { // 인자를 받아 할당한다.
    // fields
    this.name = name; // this는 객체(변수명)를 지칭한다.
    this.age = age; // this.name, this.age는 클래스의 필드(프로퍼티)이다.
  }

  // methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}

📌 클래스의 인스턴스 생성과정

🧩  1.인스턴스 생성과 this 바인딩

new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 클래스가 생성한 인스턴스다. 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킨다.

🧩  2. 인스턴스 초기화

constructor의 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. 즉 this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 값을 초기화한다. 만약 constructor가 생략되었다면 이 과정도 생략된다.

🧩  3. 인스턴스 반환

클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

class Person {
  // 생성자
  constructor(name) {
    // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩 된다.
    console.log(this); // Person {}
    console.log(Object.getPrototypeOf(this) === Person.prototype); // true

    // 2. this에 바인딩되어 있는 인스턴스를 초기화 한다.
    this.name = name;

    // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
  }
}

클래스	생성자 함수
new 연산자 없이 호출시 에러 발생	new 연산자 없이 호출시 일반 함수로 호출
extend와 super 키워드 제공 O	extend와 super 키워드 제공 X
호이스팅이 발생하지 않는 것 처럼 동작	함수선언문(함수 호이스팅),함수표현식(변수 호이스팅)
암묵적 strict mode O	암묵적 strict mode X

📌 Public Property

• 클래스에서 일반적인 방식으로 프로퍼티를 선언하고 할당하면 Public Property(공개 프로퍼티)이다.
• 퍼블릭 프로퍼티는 외부에서 프로퍼티에 접근하여 값을 사용하거나 수정이 가능하다.

📌 Static property

• 클래스를 선언할때 프로퍼티와 메소드 앞에 static 키워드를 작성하여 선언한다.
• static property와 static method 는 객체로 접근하여 사용할 수 없다. ( obj.propery , obj.method )
• 클래스(클래스명)로만 접근하여 사용할 수 있다. ( Class.propery , Class.method )
• 어떤 객체든 상관없이 공통된 모든 객체에 같은 프로퍼티, 메서드가 필요할 때 사용하면 메모리를 줄일수 있는 이점이 있다.

📌 클래스 상속 (Inheritance)

• 클래스에서 다른 클래스로 상속하면서 클래스의 기능을 확장해 나갈수 있다.
• 상속받을 클래스를 선언할 때 extexd 부모클래스 키워드를 사용하여 선언한다.

class 클래스명 extends 부모클래스 {}

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    console.log(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
  }
  stop() {
    this.speed = 0;
    console.log(`${this.name} 이/가 멈췄습니다.`);
  }
}

let animal = new Animal("동물");

• 동물을 나타내는 Animal 클래스(부모)를 만들었다.

class Rabbit extends Animal {
  jump() {
    console.log(`${this.name} 이/가 껑충껑충!`);
  }
}

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

rabbit.run(11); // 흰 토끼 은/는 속도 11로 달립니다.
rabbit.jump(); // 흰 토끼 이/가 껑충껑충!
rabbit.stop(); // 흰 토끼 이/가 멈췄습니다.

• Rabbit으로 만든 객체는 rabbit.run()과 같은 Animail에서 만든 메서드에도 접근 가능하다.