과업을 진행하면서 클래스 기본 문법에 맞지 않게 코드를 작성해서 이에 대한 글을 써본다.
원래 맞는거
class MyClass {
// 여러 메서드를 정의할 수 있음
constructor() { ... }
method1() { ... }
method2() { ... }
method3() { ... }
...
}
내가 잘못 설정한거
class MyClass {
// 여러 메서드를 정의할 수 있음
constructor() { ... }
static function method1() { ... }
//or
static method1 () => { ... }
...
}
화살표 함수는 this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
그래서 화살표 함수로 메서드를 사용하는건 적절치 않았다.
const james = {
age: 29,
arrow: () => {
console.log(this.age) // undefined
},
normal: function() {
console.log(this.age) // 27
}
}
또한, 클래스 메서드는 프로토타입에 정의되어 있으며 모든 인스턴스에서 공유되는데,
N 개의 상속받은 클래스가 있는 경우, 각각 동일한 메소드를 공유한다.
따라서 해당 메서드를 사용하면, N 번 메소드를 호출하지만 동일한 프로토타입을 호출하는 것이다.
프로토타입 전역에서 동일한 메소드를 여러 번 호출하면
JavaScript 엔진이 이를 최적화 할 수 있다고 한다.
반면에 클래스 멤버변수에 할당된 화살표 함수에 대해 N 개의 클래스를 만들면
이 N 개의 클래스들과 상응하여 N 개의 함수를 만들게되어 최적화에 좋지 않다.
function 키워드를 사용하였을 때 큰 문제는 겪지 못하였으나,
이미 메소드 정의 방식이 존재하기 때문에 function 키워드는 불필요했다.
추가로, 메서드를 정의할 때 메서드 사이엔 쉼표가 없이 정의 해야한다.
클래스와 관련된 표기법은 객체 리터럴 표기법과 차이가 있어, 클래스에선 메서드 사이에 쉼표를 넣지 않아도 됩니다.