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

🤔클래스와 생성자 함수

• JS는 프로토타입기반 객체지향 언어. 클래스가 필요없는 객체지향 언어이다.
• JS는 클래스 말고 생성자 함수를 이용하여 객체를 생성하고, 프로토타입을 통해 상속 구현이 가능하다.
• 하지만 클래스 기반 언어에 익숙한 프로그래머들의 장벽으로 EX6클래스가 도입되었다.
• 클래스와 생성자함수가 모두 인스턴스를 제공하지만, 동일하게 작동하지는 않는다

생성자 함수와 다른 클래스의 특징?

• 클래스는 new연산자 없이 사용한다.
• 상속을 지원하는 extend, super 키워드를 제공한다.
• 클래스는 함수 객체이지만, 변수 호이스팅과 같이 클래스 정의 이전에는 참조할 수 없다. (TDZ에도 빠질 수 있다).
• 클래스는 암묵적으로 strict mode를 사용한다.
• 메서드 모두 [[Enumerable]]값이 false이다. (열거할 수 없다.)

클래스의 정의?

클래스는 표현식으로 정의 가능한 일급객체이다.

• 무명의 리터럴로 생성 가능 (런타임에 생성 가능)
• 변수 자료구조에 저장가능.
• 함수 매개 변수에 전달가능.
• 함수의 반환 값으로 사용가능.

// 생성자 함수를 이용한 정의 방식
var Person = (function (){
	function Person(name){
		this.name = name
	}
	// 프로토타입 메서드
	Person.prototype.sayHi = function () {
		console.log(`Hi! my name is ${this.name}`)
	}
	// 정적 메서드
	Person.sayHello = function () {
		console.log(`Hello`)
	}
	return Person
}());

// 클래스를 이용한 정의 방식
class Person {
	constructor (name) {
		this.name = name;
	}
	// 프로토타입 메서드
	sayHi () {
		console.log(`Hi! my name is ${this.name}`)
	}
	//정적 메서드
	static sayHello {
		console.log(`Hello`)
	}
}

🤨클래스의 메서드

클래스의 메서드는 세 가지가 있다.

Constructor

클래스의 constructor와 프로토타입의 constructor는 다른 것!

• 인스턴스를 생성하고 초기화 하기 위한 메서드
• “Constructor”이름 변경 불가
• constructor 내부의 this는 인스턴스를 가리킨다.
• 메서드로 평가되는게 아니라 클래스가 평가되어 생선한 함수 객체의 코드 일부가 된다
• return값은 암묵적으로 this를 반환한다.
• 만약 return값에 다른 객체가 있다면 this말고 다른 객체를 반환 하지만, 원시값을 반환한다면 원시값은 무시되고 this가 반환된다.
• 원칙적으로 return값은 비워둔다!

프로토타입 메서드

• 클래스에선 prototype 프로퍼티에 추가하지 않아도 기본적으로 프로토타입이 된다.
• 프로토타입 체인의 일원이 된다.

정적 메서드

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

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

• 속해 있는 프로토타입 체인이 다르다
• 정적 메서드는 클래스로, 프로토타입 메서드는 인스턴스로 호출한다.
• 정적 메서드는 인스턴스 프로퍼티 참조 불가능, 프로토타입 메서드는 가능.

메서드는 내부에서 인스턴스 프로퍼티를 참조하려면 this를 사용해야 하며, 이 경우 프로토타입 메서드를 사용해야 한다!

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

• function 키워드를 생략한 메서드 축약 표현
• 객체와 다르게 메서드 정의시 콤마가 필요없다.
• 암묵적인 strict mode
• 열거 불가능. [[Enumerable]] 값 false.
• [[Constructor]]를 갖지 않는 non-constructor. 따라서 new 연산자와 함께 호출 불가능.