자바스크립트 클래스

클래스

클래스란 특정한 객체를 만들기 위한 일종의 탬플릿.

즉, 특정 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 클래스.

클래스 내부에 선언한 메서드를 인스턴스 매서드라고 함.

이 인스턴스 메서드는 실제 자바스크립트 prototype에 선언되니 프로토타입 매서드라고 불리기도 함.


class Car(asd){ 
	...
	hello() {
		console.log(asd);
	}
}
const car = new Car('asd');
car.hello() // asd

이렇게 새로 생성한 객체에서 클래스의 hello 인스턴스 메서드에 접근할 수 있다.

이런 이유는 프로토타입 메서드라고 불리는 이유이고 즉 메서드가 prototype에 선언되었기 때문.

직접 객체에 선언하지 않았어도 프로토타입에 있는 메서드를 찾아 실행을 도와주는걸 프로토타입 체이닝이라고 함.

모든 객체는 프로토타입을 가지고 있고 특정 속성을 찾을 . 때자기 자신부터 시작해 이 프로토타입을 타고 최상위 Object까지 훑는다.

이 경우 car에서 시작해 부모인 Car에서 hello를 찾는 프로토타입 체이닝을 거쳐 비로소 hello를 호출하는 것.

이와 비슷하게 toString은 어디에서도 선언한 적 없지만 대부분의 객체에서 모두 사용할 수 있는 이유는 프로토타입 체이닝을 거쳐 Object에 있는 toString을 만나기 때문

이를 통해 hello 메서드를 호출할 수 있고 . 이메서드 내부에서 this도 접근할 수 있는 것.

정적 메서드는 클래스의 인스턴스가 아닌 이름으로 호출할 . 수있는 메서드.


class Car(asd){ 
	...
	static hello() {
		console.log(asd);
	}
}
const car = new Car('asd');
car.hello() // error
Car.hello() // asd

정적 메서드 내부의 this는 클래스로 생성된 인스턴스가 아닌 클래스 자신을 가리키기 때문에 this를 사용할 수 없음.

이런 이유로 리액트 클래스형 컴포넌트 생명주기 메서드인 static getDerivedStateFromProps(props, state) 에서 this.state에 접근할 수 없다.

this에 접근할 수 없지만 인스턴스를 생성하지 않아도 사용할 수 있다는 점, 그리고 생성하지 않아도 접근할 수 있기 때문에 객체를 생성하지 않더라고 재사용 가능한 장점이 있는 편.

어플리케이션 전역에서 사용하는 유틸 함수를 정적 메서드로 많이 사용함.

클래스는 ES6에 나온 개념으로 ES6 이전에는 프로토타입을 활용해 클래스 작동 방식을 동일하게 구현할 수 있었음.

다시말해 클래스가 작동하는 방식은 자바스크립트의 프로토타입을 활용하는 것.

바벨로 변환하게 되면 _createClass 라는 헬퍼 함수를 만들어 클래스와 동일한 방식으로 동작할 수 있도록 변경함.