[javascript] 생성자 함수와 클래스

 

생성자 함수란?

반복적으로 재사용 가능한 객체를 생성할 때 사용하는 함수이다. 즉, 주물 틀과 같은 것. 반드시 지켜야 할 것은 new라는 키워드와 함께 생성자 함수의 제일 앞 글자를 대문자로 적어야 한다는 것이다.

위의 그림은 Student라는 생성자 함수를 이용해 student라는 객체를 만드는 과정이다.

1) new 키워드는 빈 객체를 생성하고,

2) 생성자 함수에 정의된 프로퍼티들을 따라

3) 함수의 인수들을 프로퍼티에 할당한다.

4) 생성자 함수를 통해 완성된 객체를 student에 할당한다.

 

 

Class란?

클래스는 ES6부터 추가된 문법으로 생성자 함수와 같이 객체를 생성하기 위한 템플릿인데, 여기에서 더 나아가 메서드까지 추가하여 객체를 추상화하는 함수라고 할 수 있다.

기본 문법은 다음과 같다.(클래스 선언)

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }  >> 이 부분이 new 키워드로 호출되는 생성자 함수 부분이다. 
  method1() { ... }  >> function 키워드를 사용하지 않고 바로 작성한다.
  method2() { ... }
  method3() { ... }
  ...
}


//실제 예시
class User {

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

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

}

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

클래스도 함수이기 때문에 클래스 표현식과 클래스 선언으로 정의할 수 있는데, 기명 클래스 표현식은 클래스 내부의 로컬 스코프에 한해 유효하다.(클래스 내부에서만 사용할 수 있다는 것!) 그리고 호이스팅이 가능한 함수 선언과 달리 클래스 선언은 호이스팅이 제한되므로 반드시 선언 후에 사용해야 한다.

//클래스 표현식
// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

console.log(Rectangle.name); //output: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

console.log(Rectangle.name);  //output: "Rectangle2"

 

 

getter와 setter

마치 패트와 매트 같은 이름이다. 실제로 사용할 때도 종종 같이 사용되기 때문에 묶어서 설명한 문서들이 많이 발견된다. 게터와 세터가 클래스에서만 쓰이는 것은 아니지만 클래스에서 유용하게 사용되기에 함께 알아보고 넘어가자. 

객체의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉘는데, 이때 접근자 프로퍼티의 본질은 함수이고, 값을 획득하고 설정하는 역할을 담당한다. >> get&set

//getter와 setter 예시
let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

console.log(user.fullName); // John Smith //get fullName 실행

user.fullName = "Alice Cooper"; // 주어진 값을 사용해 set fullName 실행

console.log(user.name); // Alice
console.log(user.surname); // Cooper

위 코드에서 보면 알 수 있듯이 get 함수와 set 함수를 함수처럼 호출하지 않고 프로퍼티에서 값에 접근하는 것과 같은 방식으로 호출한다.