[JS] 클래스(class): 정적 메소드(static method)와 프로토타입 메소드(prototype method)의 차이

 

클래스(Class)는 ES6에서 도입된 기능이다. class 키워드를 사용하여 정의하며, 내부 몸체에 3가지 종류의 메소드를 사용할 수 있다. 이 세가지 종류가 바로 생성자, 프로토타입 메소드, 그리고 정적 메소드이다.

 

 

class Character {
  // 1. 생성자
  constructor(name) {
    this.name = name
    this.level = 1
    this.job = "adventurer"
  }
  
  // 2. 프로토타입 메소드
  introduce() {
    return `Hello, I'm ${this.name} and my level is ${this.level}.`
  }
  
  // 3. 정적 메소드
  static complain() {
    return `Oh man! What is that smell?`
  }
}

const user = new Character("Bongpal")

 

 

 

 

 

 

정적 메소드 vs. 프로토타입 메소드

 정적 메소드는 인스턴스의 프로토타입 체인에 속해있지 않다. 그렇기 때문에, 정적 메소드와 프로토타입 메소드는 아래와 같은 차이점을 가지게 된다:

 

1. 정적 메소드는 클래스로 호출한다 <-> 프로토타입 메소드는 인스턴스로 호출한다

정적 메소드는 생성자 함수로 인스턴스를 생성하지 않아도 호출할 수 있는 메소드를 말한다. 그렇기 때문에, 정적 메소드는 클래스로 호출이 가능하다. 위 예제의 정적 메소드는 complain()으로, 인스턴스를 생성하지 않아도 클래스로 호출을 할 수 있다.

 

// 정적 메소드는 클래스로 호출한다
Character.complain()


// 프로토타입 메소드는 인스턴스로 호출한다
const user = new Character("Bongpal")
user.introduce()

 

 

2. 정적 메소드는 인스턴스의 프로퍼티를 참조하지 않는다 <-> 프로토타입 메소드는 인스턴스의 프로퍼티를 참조한다

정적 메소드는 클래스로 호출되기 때문에, 인스턴스로 호출되는 클래스와는 내부의 this가 다를 수 밖에 없다. 따라서, this를 사용해야하는 경우엔 프로토타입 메소드로 정의해야 한다. 반면에 this로 인스턴스의 프로퍼티를 참조해야할 필요가 없고 클래스 호출만으로도 충분하다면 정적 메소드로 만들면 된다.

 

 

 

 

클래스 관련 이전글

2021.04.09 - [Learn to Code] - [JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing)

[JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing)

 

2021.08.10 - [Learn to Code] - [JS] Javascript (ES6+)

[JS] Javascript (ES6+)