자바스크립트 기초(클래스)

1. 클래스(Class)란?

- 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는

일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

 

- 실무에선 사용자나 물건같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 잦다.

이럴 때 new 연산자와 생성자 함수에서 배운 new function을 사용할 수 있다. 여기에 더하여

모던 자바스크립트에 도입된 클래스(class)라는 문법을 사용하면 객체 지향 프로그래밍에서

사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있다.

 

2. 기본 문법

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

이렇게 클래스를 만들고, new MyClass()를 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

객체의 기본 상태를 설정해주는 생성자 메서드 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화 할 수 있다.

 

ex)

class User {

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

  sayHi() {
    alert(this.name);
  }

}

// 사용법:
let user = new User("John");
user.sayHi();

new User("John")를 호출하면 다음과 같은 일이 일어난다.

1. 새로운 객체가 생성된다.
2. 넘겨받은 인수와 함께 constructor가 자동으로 실행됩니다. 이때 인수 "John"이 this.name에 할당된다.

이런 과정을 거친 후에 user.sayHi() 같은 객체 메서드를 호출할 수 있다.

 

3. 프로토타입 메서드(Prototype Method)

: 만약 프로토타입으로 메서드를 만들어주지 않는 경우에는 인스턴스가 생성될 때마다 계속해서 메서드를 생성해줘야 한다. 클래스는 보다 더 간결하게 프로토타입 메서드를 생성하는 것이 가능하다.

class Person {
    // 생성자 역할을 함
    constructor(name) {
        // 인스턴스 생성 및 초기화 진행이 가능함
        this.name = name;
    }
    // 프로토타입 메서드
    returnName() { console.log(`I'm $`); }
}
// 클래스를 호출해서 인스턴스 생성함
const me = new Person('Wonjae');
// 프로토타입 메서드를 호출했음
me.returnName(); // I'm Wonjae

이를 통해 인스턴스는 프로토타입 메서드를 상속받아 사용하는 것이 가능하다. 즉, 프로토타입 체인은 클래스에 의해서 생성된 인스턴스에서도 동일하게 적용된다는 점을 알 수 있다. 이는 클래스도 결국은 생성자 함수와 마찬가지로 프로토타입 기반의 객체 생성 메커니즘이라는 것을 알 수 있다.

 

4. 정적 메서드(Static Method)

: 정적 메서드는 인스턴스를 생성하지 않고도 호출이 가능한 메서드이다. 클래스에서는 아래와 같이 정적 메서드(클래스 메서드)를 만들어 줄 수 있다.

class Person {
    // 생성자 역할을 함
    constructor(name) {
        // 인스턴스 생성 및 초기화 진행이 가능함
        .this.name = name;
    }
    // 프로토타입 메서드
    returnName() { console.log(`I'm $`); }
    // 정적 메서드
    static sayHello() { console.log('Hello!'); }
}
// 클래스를 호출해서 인스턴스 생성
const me = new Person('Wonjae');
// 프로토타입 메서드를 호출했음
me.returnName();
// I'm Wonjae  
Person.sayHello(); // Hello!

정적 메서드는 클래스에 바인딩된 메서드입니다. 클래스는 함수 객체이다. 그러므로 본인 소유의 프로퍼티와 메서드를 가질 수 있다. 클래스는 인스턴스와 달리 별도의 생성 과정이 필요없기 때문에 클래스로 호출이 가능하다.