[자바스크립트 핵심 개념] 클래스

클래스

인스턴스

• 어떤 클래스의 속성을 지니는 실존하는 개체
• 한 인스턴스는 하나의 클래스만을 바탕으로 만들어집니다.

클래스

• 공통요소를 지니는 집단을 분류하기 위한 개념
• 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체들을 생성할 수 있습니다.
• 추상적인 대상이나 구체적인 개체가 될 수 있음

상속이 아닌 프로토타입 체이닝에 의한 참조

클래스는 값으로 사용할 수 있는 일급객체임

1. 무명의 리터럴로 생성할 수 있음. 즉, 런타임에 생성이 가능함
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있음
3. 함수의 매개변수에게 전달할 수 있음
4. 함수의 반환값으로 사용할 수 있음

• 클래스 선언문으로 정의한 클래스는 함수선언문과 같이 소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수객체를 생성함. 이때 클래스가 평가되어 생성된 함수객체는 생성자 함수로서 호출할 수 있는 함수, 즉 constructor다. 생성자 함수로서 호출할 수 있는 함수는 함수정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성됨 (단독으로 존재x, 쌍으로 존재)

• 모든 함수 객체가 가지고 있는 prototype 프로퍼티가 가리키는 프로토 타입 객체의 constructor 프로퍼티는 클래스 자신을 가리키고 있음. 이는 클래스가 인스턴스를 생성하는 생성자 함수라는 것을 의미함. 즉, new 연산자와 함께 클래스를 호출하면 클래스는 인스턴스를 생성함. constructor 내부의 this는 생성자 함수와 마찬가지로 클래스가 생성한 인스턴스를 가리킴.

• constructor는 클래스 내 최대 1개 constructor는 생략 가능 --> 빈 객체 생성

  • constructor 내에서는 인스턴스의 생성과 동시에 인스턴스 프로퍼티 추가를 통해 인스턴스의 초기화를 실행함 --> 인스턴스를 초기화 하기 위해 constructor 생략해서는 안된다.
  • constructor는 별도의 반환문을 갖지 않아야 함 --> new 연산자와 함께 클래스를 호출하면 암묵적으로 this, 즉 인스턴스를 반환하기 때문
    (this x, 다른 객체 명시적 반환하면 return문에 명시한 객체 반환)
    원시값을 반환하면 암묵적으로 this
  
  

정적 메서드 vs 프로토타입 메서드

1. 정적 메서드와 프로토타입 메서드는 자신이 속해있는 프로토타입 체인이 다르다.
2. 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출한다.
3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.

클래스에서 정의한 메서드의 특징

1. function 키워드를 생략한 메서드 축약 표현을 사용한다.
2. 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요없다.
3. 암묵적으로 strict mode로 실행
4. for ... in문이나 Object.keys 메서드 등으로 열거할 수 없다. 즉, 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. (new와 호출 x)

클래스 인스턴스 생성과정

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

   • new + 클래스 호출 --> constructor의 내부코드가 실행되기에 앞서 암묵적으로 빈 객체 생성 (인스턴스) - this에 바인딩됨
   • 이때 클래스가 생성한 인스턴스의 프로토 타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다.
     (constructor 내부 this는 클래스가 생성한 인스턴스를 가리킴)

2. 인스턴스 초기화

   • this에 바인딩된 프로퍼티 추가, constructor에 인수로 전달된 값으로 초기화

3. 인스턴스 반환

[출처]
모던 자바스크립트 Deep Dive 위키북스 이웅모 지음
코어 자바스크립트 위키북스 정재남 지음