클래스 기본 문법 - 메서드

Jaemin Jung·2022년 3월 17일
0

JavaScript

목록 보기
12/14

과업을 진행하면서 클래스 기본 문법에 맞지 않게 코드를 작성해서 이에 대한 글을 써본다.

메소드 설정법

원래 맞는거

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 키워드는 불필요했다.

추가로, 메서드를 정의할 때 메서드 사이엔 쉼표가 없이 정의 해야한다.
클래스와 관련된 표기법은 객체 리터럴 표기법과 차이가 있어, 클래스에선 메서드 사이에 쉼표를 넣지 않아도 됩니다.

profile
내가 보려고 쓰는 블로그

0개의 댓글