25장 클래스(~25.7) (모던 자바스크립트 Deep Dive)

모던 자바스크립트 Deep Dive 글 목록(스터디)
https://hello-kk.tistory.com/780

---

일급 객체: 다른 변수에 할당 가능, 매개변수와 반환값으로 사용 가능

 

클래스와 생성자 함수 차이점

프로토타입 메서드, 프로토타입 기반의 객체 생성 메커니즘(클래스, 생성자 함수 둘 다!)

클래스는 클래스 정의가 평가되는 시점에 함수 객체가 생성(생성 과정 필요X) ↔ 인스턴스(생성 과정 필요)

정적 메서드란?
정적 메서드 호출 방법?
정적 메서드는 상속받을 수 없다
정적 메서드와 프로토타입 메서드의 차이

인스턴스 프로퍼티 참조가 가능한 것은 프로토타입 메서드(정적 메서드는 불가)
프로토타입 메서드는 클래스와 생성자 함수 둘 다에 존재
this를 사용하지 않는 메서드: static

클래스의 인스턴스 생성 과정
1. new 연산과 함께 호출시, (constructor 내부 코드 실행되기 전,) 빈 객체 생성!! == 인스턴스
2. 그 후 인스턴스가 this에 바인딩
(3. constructor 내부의 this는 인스턴스를 가리킴)

접근자 프로퍼티
자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장하는 접근자 함수로 구성된 프로퍼티. set, get 키워드와 함께 사용
프로퍼티이기 때문에 호출하지 않는다. => 괄호 사용하지 않음

클래스 필드: '인스턴스'의 프로퍼티
클래스 필드를 초기화해야 한다면? constructor 밖에서 클래스 필드를 정의할 필요가 없다
클래스 필드에 함수를 할당하면, 프로토타입 메서드가 아니라 인스턴스 메서드가 된다

private 필드 정의 제안
: 클래스 인스턴스를 통한 접근도 불가능

---

25.1 클래스는 프로토 타입의 문법적 설탕인가?

문법적 설탕?

자바스크립트는 프로토타입 기반 객체지향 언어(클래스가 필요 X)

=> 그러나, 생성자 함수 + 프로토타입 = 상속 구현 가능

 

		생성자 함수	클래스
공통점		프로토타입 기반의 인스턴스 생성
차이점	new 없이 호출시	일반 함수로 호출	에러 발생
	extends super 키워드	제공 x	상속: extends super 키워드 제공
	호이스팅	선언문 생성자 함수: 함수 호이스팅 표현식 생성자 함수: 변수 호이스팅	호이스팅 발생하지 않는 것처럼 보임 (let, const로 선언한 변수처럼 호이스팅, TDZ 존재)
	암묵적 strict mode	지정되지 않는다	암묵적으로 strict mode 지정되며, 해제 불가능
	[[Enumerate]] false 열거X	프로토타입 메서드, 정적 메서드	constructor

클래스의 경우, 생성자 함수 기반의 객체 생성 방식보다 간결하고 명료

=> extends와 super 키워드가 상속 관계 구현에 있어서!

 

25.2 클래스 정의

클래스는 일급 객체: 값으로 사용할 수 있다(표현식)

● 무명의 리터럴로 생성 가능(런타임에 생성 가능)

● 변수나 자료구조(객체, 배열)에 저장 가능

● 함수의 매개변수에 전달 가능

● 함수 반환값으로 사용 가능

 

클래스 몸체

● constructor

● 프로토타입 메서드

● 정적 메서드

 

클래스의 정의 방식

Class Person{
    //생성자
    constructor(){
    }
    //프로토타입 메서드
    sayHi(){
    }
    //정적 메서드
    static sayHello(){
    }
}

생성자 함수의 정의 방식

var Person = (function(){
    //생성자 함수
    function Person(){
    }
    //프로토타입 메서드
    Person.prototype.sayHi = function(){
    }
    //정적 메서드
    Person.sayHello = function(){
    }
    
    return Person
}())

	클래스의 정의 방식	생성자 함수의 정의 방식
생성자	constructor()	function 클래스명()
프로토타입 메서드	함수명()	클래스명.prototype.함수명 = function(){}
정적 메서드	static 함수명()	클래스명.함수명 = function(){}
반환		생성자 함수
IIFE		실행
결론	1. function 키워드가 없음	1. 모두 function 키워드가 포함됨 2. 메서드의 경우 클래스명 포함 3. 생성자를 반환

25.3 클래스 호이스팅

클래스는 함수로 평가됨

=> 선언문과 같이 런타임 이전에 먼저 평가되어 객체 생성

constructor(생성자 함수)와 동시에 프로토타입이 생성됨

 

let, const로 선언한 변수처럼 호이스팅되기 때문에, TDZ 존재

 

25.4 인스턴스 생성

 

표현식으로 정의된 클래스의 경우

식별자를 이용해 인스턴스를 생성해야 한다(기명 클래스 표현식의 이름을 사용하지 말 것)

(기명 함수 표현식과 마찬가지. 외부 코드에서 접근 불가능)

 

25.5 메서드

클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다?

=> 프로퍼티는, constructor 함수에서 생성 및 초기화

 

25.5.1 constructor

역할: 인스턴스 생성(즉, 생성자 함수), 초기화

클래스는 함수로 평가되기 때문에, 프로토타입과 연결되어 있고 스코프체인을 형성

 

	클래스의 메서드	프로토타입의 프로퍼티
constructor	● 메서드로 해석되지 않음 ● 생성한 함수 객체 코드의 일부가 됨  (= constructor에 기술된 동작을 하는 함수 객체가 됨)	● 모든 프로토타입이 갖고있는 프로퍼티 ● 생성자 함수를 가리킴

 

생성자 함수와의 차이점

1. 최대 한 개만 존재 가능

2. 생략 가능

 

● return을 명시하게되면, 명시된 객체가 반환됨( 따라서, 반드시 생략! )

● 명시하지 않으면 this 반환

 

25.5.2 프로토타입 메서드

생성자 함수를 사용한 경우

생성자함수명.prototype.함수명 = function(){}

클래스의 경우

클래스 몸체에 정의한 메서드는 prototype 메서드가 된다

클래스가 생성한 인스턴스는 프로토타입 체인에 속하게 된다

 

25.5.3 정적 메서드

정적 메서드: 인스턴스를 생성하지 않아도 호출 가능한 메서드

 

클래스는 클래스 정의가 평가되는 시점에 함수 객체가 생성(생성 과정 필요X) ↔ 인스턴스(생성 과정 필요)

 

정적 메서드 호출 방법: 클래스로 호출

정적 메서드는 상속받을 수 없다. 인스턴스의 프로토타입 체인 상에 클래스가 존재하지 않기 떄문

 

25.5.4 정적 메서드와 프로토타입 메서드의 차이

1. 프로토타입 체인이 다름

2. 정적 메서드는 클래스로 호출, 프로토타입 메서드는 인스턴스로 호출

3. 정적 메서드는 인스턴스 프로퍼티 참조 불가, 프로토타입 메서드는 가능

 

this를 사용하지 않는 메서드는 정적 메서드로 정의하기

 

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

1. function 키워드 생략, 축약 표현 사용

2. 클래스에 메서드를 정의할 때 콤마 필요X

3. 암묵적으로 strict mode로 실행

4. for ... in, Object.keys 메서드 등으로 열거 불가. [[Enumerate]] false

5. non-constructor. (new 불가)

 

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

(1) 인스턴스 생성과 this 바인딩

new 연산과 함께 호출시, (constructor 내부 코드 실행되기 전,) 빈 객체 생성!! == 인스턴스

그 후 인스턴스가 this에 바인딩

constructor 내부의 this는 인스턴스를 가리킴

 

(2) 인스턴스 초기화

(constructor 내부 코드 실행, ) this에 바인딩 된 인스턴스 초기화

인스턴스에 프로퍼티를 추가 및 초기화

 

(3) 인스턴스 반환

 

25.7 프로퍼티

25.7.1 인스턴스 프로퍼티

constructor 내부에서 정의

 

25.7.2 접근자 프로퍼티

자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장하는 접근자 함수로 구성된 프로퍼티

프로퍼티이기 때문에 호출하지 않는다.

getter과 setter 함수로 구성 (get, set 키워드를 사용해 정의)

const person = {
    firstName:'hello'
    lastName:'JavaScript'

    get fullName(){
    }
    
    set fullName(){
    }
}

25.7.3 클래스 필드 정의 제안

클래스 필드: 인스턴스의 프로퍼티(public)

(1) 몸체에 바로 사용

(2) 인스턴스 프로퍼티를 참조할 때, this 생략해도 클래스 필드 참조 가능

 

자바스크립트에서

클래스 필드를 정의하는 경우, this에 클래스 필드를 바인딩하며 안됨(constructor와 메서드 내에서만 유효)

그러나, 클래스 필드를 '참조'하는 경우 this를 반드시 사용해야 함

class Person{
    name ='';
    
    constructor(name){
        this.name = name;
    }
}

 

생각해볼 점

초기화하지 않으면 undefined

인스턴스를 생성할 때 클래스 필드를 초기화해야 한다면, constructor 내부에서 하면 됨

즉, constructor 밖에서 클래스 필드를 정의할 필요가 없다

 

클래스 필드: 함수 할당 가능(권장 X)

클래스 필드에 함수를 할당하면, 프로토타입 메서드가 아니라 인스턴스 메서드가 된다

 

25.7.4 private 필드 정의 제안

인스턴스 프로퍼티는 언제나 public

 

private 필드 제안: 클래스 몸체에 정의

class Person{
    #name ='';
    
    constructor(name){
        this.#name = name;
    }
}

클래스 인스턴스를 통한 접근도 불가능

 

25.7.5 static 필드 정의 제안

static public 필드 정의

static private 필드 정의

class MyMath{
    static PI = 22/7;
    
    static #num = 10;
}