[클래스] 클래스(Class)

📄 클래스(Class)란

자바스크립트는 기본적으로 객체지향언어를 지원합니다.

es6문법에 class가 추가되어 좀더 강력한 객체지향언어를 지향하게 되었습니다.

Class는 객체를 생성하기 위한 템플릿이자 함수의 한 종류입니다.

클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다.

📄 선언적 방식

class A {
    constructor() {...}
    method1() {...}
    method2() {...}
} //class A 생성

console.log(new A()); // class A의 세로운 객체를 출력

결과

A {}

클래스를 만들고 new A()를 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성됩니다.
클래스 내부에서 정의한 메서드는 A.prototype에 저장됩니다.
객체의 기본 상태를 설정해주는 생성자 메서드 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화할 수 있습니다.

주의할 점

• 메서드 사이에는 쉼표가 없습니다.

• 클래스의 선언적 방식에서 호이스팅은 일어나지 않습니다.

• new키워들를 통해 호출하지 않으면 에러가 발생합니다.
• 클래스에 정의된 메서드는 열거할 수 없습니다. 클래스의 prototype프로퍼티에 추가된 메서드의 enumerable플래그는 false입니다.
• 클래스는 항상 엄격모드로 실행됩니다.(use strict)

📄 클래스 표현식

클래스의 표현식을 변수에 할당하는 방식으로 사용됩니다.

const B = class {};

console.log(new B());

결과

B {}

📄 클래스 필드로 바인딩 된 메서드

자바스크립트에서 this는 동적으로 결정됩니다.

따라서 객체 메서드를 여기저기 전달해 전혀 다른 컨텍스트에서 호출하게 되면 this는 메서드가 정의된 객체를 참조하지 않습니다.

class Button {
  constructor(value) {
    this.value = value;
  }

  click() {
    cosole.log(this.value);
  }
}

let button = new Button("안녕하세요");

setTimeout(button.click, 1000);

결과

undefined;

this의 컨텍스트를 알 수 없게 된 현상을 ‘잃어버린 this‘라고 합니다.
이러한 현상을 해결하기 위해 클래스 필드를 사용할 수 있습니다.

class Button {
  constructor(value) {
    this.value = value;
  }

  click = () => {
    // 수정한 부분
    alert(this.value);
  };
}

let button = new Button("안녕하세요.");

setTimeout(button.click, 1000);

결과

안녕하세요.

클래스 필스 click = () => {...}는 각 Button객체마다 독립적인 함수를 만들어주고 이 함수의 this를 해당 객체에 바인딩시켜줍니다.
클래스의 이러한 기능은 브라우저 환경에서 메서드를 이벤트 리스너로 설정해야할 때 특히 유용합니다.

📄 멤버변수

멤버 변수는 메소드 밖에서 선언된 변수를 뜻합니다. 클래스의 멤버변수는 this라는 키워드를 사용하여 반드시 생성자에 만들어야 합니다.

class C {
  name = "no name"; // 초기값 설정
  age = 0;

  constructor(name, age) {
    // 생성자를 통해서 새로 할당.
    this.name = name; // 멤버변수
    this.age = age; // 멤버변수
  }
}

console.log(new C("Mark", 37));

결과

C { name: 'Mark', age: 37 }

📄 멤버 함수

클래스에는 멤버변수 뿐만 아니라 멤버 함수도 생성할 수 있습니다.

class A {
  // 방법1: 함수의 이름과 중괄호를 이용해 설정
  hello1() {
    console.log("hello1", this);
  }
  // 방법2: 멤버변수 이름에 함수를 할당하는 방법
  hello2 = () => {
    console.log("hello2", this);
  };
}

new A().hello1();
new A().hello2();

결과

hello1 A { hello2: [Function: hello2] }
hello2 A { hello2: [Function: hello2] }

출처

• 패스트캠퍼스
  
  

• MDN web docs