본문 바로가기
  • 프론트엔드 개발자 세오세오 | Frontend dev Seo
Learn to Code

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

by CEOSEO 2021. 10. 4.
728x90
반응형

 

클래스(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)

클래스(Class)와 인스턴스(Instance) 객체 지향 프로그래밍 패러다임을 따른다는 것은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그리고 그 청사진을 바탕으로한 객체(object)를 만든다는 것을

seo-tory.tistory.com

 

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

 

[JS] Javascript (ES6+)

자바스크립트 vs. ECMAScript ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해..

seo-tory.tistory.com

 

 

 

 

 

728x90
반응형

'Learn to Code' 카테고리의 다른 글

HTTP/1.1 vs. HTTP/2  (1) 2021.10.24
[JS] apply, call, bind  (0) 2021.10.21
[TIL] 갑자기 달력이 만들고 싶어졌다 (바닐라JS)  (0) 2021.10.03
[JS] 정규표현식 (2)  (0) 2021.10.02
[JS] 제너레이터란(Generator)?!  (0) 2021.10.02

댓글