[하루 30분 모던 자바스크립트 딥 다이브] 클래스 2

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

• new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 [[Construct]]가 호출된다.

1. 인스턴스 생성과 this 바인딩
   • constructor 코드가 실행되기 앞서 빈 객체가 생성된다. 이 객체가 인스턴스이다.
   • 인스턴스의 프로토타입으로 클래스의 prototype이 설정된다.
   • 인스턴스에 this가 바인딩된다.
2. 인스턴스 초기화
   • constructor가 인수로 받은 초기화 값을 인스턴스 프로퍼티 값으로 초기화 한다.
   • constructor가 생략되었다면, 이 과정 역시 생략된다.
3. 인스턴스 반환
   • 암묵적으로 this가 반환된다.

🤨클래스의 프로퍼티

인스턴스 프로퍼티

• constructor 내부에서 정의한다
• 접근 제한자 없이는 항상 public값으로 가진다.

접근자 프로퍼티

• 자체적인 값([[Value]] 내부슬롯)을 갖지 않는다.
• 다른 프로퍼티를 읽거나 저장하는 접근자 함수이다.
• get, set 키워드를 사용하여 정의가 가능하다.
• 기본적으로 인스턴스의 프로퍼티가 아닌 프로토타입의 프로퍼티가 된다.

정적 메서드

• static 키워드를 이용하여 정적 메서드로 만들 수 있다
• 정적 메서드는 클래스에 바인딩 되어 인스턴스에서 참조할 수 없다.

🤔클래스 필드 정의 제안?

• 클래스 필드란 클래스 기반 객체 지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어
• 자바스크립트 클래스에서는 프로퍼티를 선언하고 초기화 하려면 constructor 내부에서 this 프로퍼티가 필요하다.
• 하지만 아래 코드는 유효하다

class Person {
	name = "Lee";
}
const me = new Person()

• 클래스 필드를 정의하는 경우 this에 클래스 필드를 바인딩 해서는 안 된다.

class Person {
	this.name // SyntaxError
}

• 함수 역시 일급 객체 이므로 클래스 필드에 할당할 수 있다. 하지만 모든 클래스 필드는 인스턴스 프로퍼티가 되고, 함수 역시 프로토타입 메서드가 아닌 인스턴스 메서드가 되므로 클래스 필드에 함수를 할당하는 것은 옳지 않다.

🤔private 필드 정의 제안

• #을 이용하여 private필드를 정의할 수 있다.
• 필드를 참조할 때도 #을 붙여야 한다.

class PrivateFiled {
	#privateProperty = 'foo'
  publicPropery = 'bar'
    
  //private instance method
  #privateMethod() {
		return 'Kim'
	}
  publicMethod() {
		return this.#privateProperty;
	}
}

const obj = new PrivateFiled()

console.log(obj.#privateProperty) // Error
console.log(obj.publicPropery) // bar
console.log(obj.publicMethod()) // foo
console.log(obj.#privateMethod()) // Error

• private 필드는 클래스 몸체에 정의해야 한다. constructor 내부에서 정의하면 에러가 발생한다.

🤔static 필드 정의 제안

• static 키워드를 사용하여 정적 필드를 정의할 수 있다

class MyMath{
	//static public 필드 정의
	static PI = 22/7;
	//static private 필드 정의
	static #num = 10;
	//static 메서드
	static increment(){
		return ++MyMath.#num;
	}
}