JavaScript - 프로토타입 메서드, 정적 메서드

자바스크립트 클래스의 매서드 작성법은 2가지가 있다.

 

첫 번째는 '프로토타입 메서드', 두 번째는 '정적 메서드' 이다.

 

class Person {
    constructor(name) {
        this.name = name; // name 프로퍼티는 public하다
    }

    // 프로토타입 메서드
    sayHi() {
        console.log(`Hi! My name is ${this.name}`);
    }

    // 정적 메서드
    static sayHello() {
        console.log("Hello!");
    }
}

// 인스턴스 생성
const me = new Person('Lee');

// 인스턴스의 프로퍼티 참조
console.log(me.name); // Lee

// 프로토타입 메서드 호출
me.sayHi(); // Hi! My name is Lee

// 정적 메서드 호출
Person.sayHello(); // Hello!

 

정적 메소드 v.s 프로토타입 메소드

 

호출 방식 차이

 

정적 메소드는 클래스로 호출하고, 프로토타입은 인스턴스를 만들어 호출해야 한다.

 

class Character {
    constructor(name) {
        this.name = name;
        this.level = 1;
        this.job = 'citizen'
    }

    introduce() {
        return `Hello my name is ${this.name}. My job is ${this.job}`;
    }

    static complain() {
        return `This character level is low`;
    }
}

const player = new Character("Jack");

console.log(player.introduce());

console.log(Character.complain());

 

this 가 다르다.

 

프로토타입 메소드 내부의 this는 클래스 object를 가리켜 인스턴스의 속성에 접근할 수 있다.

 

하지만 정적 메소드 내부의 this는 클래스 object를 가리키지 않아 인스턴스 속성에 접근할 수 없다.