[javaScript] 클래스 프로토타입, 정적 매서드

[javaScript] 클래스 프로토타입, 정적 매서드

클래스 프로토타입, 정적 매서드

 

안녕하세요. gaki 입니다.

오늘은 자바스크립트에서 클래스 프로토타입 함수와 정적 매서드에 대해서 알아보겠습니다.

프로토타입은 자바스크립트에서 사용되는 독특한 기능으로 클래스 인스턴스를 만들때마다 클래스 내의 매서드를 일일이 정의하게 되면 메모리 낭비가 되기 때문에 클래스 인스턴스는 프로토타입에 접근해 함수의 매서드를 사용할 수 있습니다.

정적 매서드는 클래스 프로토타입 매서드와는 다르게, 클래스 인스턴스에서 사용 접근 할 수 없는 매서드입니다.

아래에서 더 자세히 설명하겠습니다.

 

<목차>

1. 프로토타입 매서드 선언 방법

2. 스태틱 매서드 선언 방법

---

 

1. 프로토타입 매서드 선언 방법

자바스크립트에서 인스턴스를 생성하는 방법은 두 가지가 있습니다.

하나는 생성자 함수를 이용하는 방법이고 하나는 클래스를 이용하는 방법입니다.

그리고 각각의 경우마다 프로토타입 매서드를 선언하는 방법이 다른데요. 

한번 코드를 보면서 살펴보겠습니다.

//1. 생성자 함수를 이용한 프로토타입 매서드 선언 방법
function Person {
	this.name = name;
};

Person.prototype.sayHi = function() {
	console.log(`hello! I'm ${this.name}`);
}

const Jack = new Person("jack");
Jack.sayHi(); // hello! I'm jack

//2. 클래스를 이용한 프로토타입 매서드 선언 방법
class Person{
	constructor(name) {
    	this.name = name;
        }
    
    sayHi() {
    	console.log(`hello! I'm ${this.name}`);
     }
}

const Amy = Person("amy");
Amy.sayHi(); // hello! I'm amy

생성자 함수의 경우에는 함수이름.prototype.functionName 으로 프로토타입 매서드를 선언할 수 있습니다.

반면 클래스의 경우에는 클래스 내부에 함수를 정의하면 그 함수는 자동으로 프로토타입 매서드로 취급됩니다.

 

2.스태틱 매서드 선언 방법

스태틱 매서드란, 클래스 자체에서 호출 할 수 있는 매서드입니다.

스태틱 매서드는 프로토타입 매서드와 스코프 체인이 다르기 때문에, 클래스 인스턴스에서 스태틱 매서드에 접근 할 수 없습니다.

다음 그림은 클래스와 인스턴스, 그리고 포로토타입의 스코프 체인인데요.

static Methods 는 Instance 에서 접근 할 수 없습니다.

따라서 static Methods는 클래스 본체에서만 사용할 수 있는겁니다. 

Class Person {
	static sayHi() {
    	console.log("Hi");
    }
}

const me = new Person();
me.sayHi(); // Error!! SayHi not founded.

Person.sayHi(); // Hi

단, 인스턴스에서 스태틱 매서드를 호출할 수있는 방법이 한가지 있긴합니다.

그건 바로 인스턴스에서 스코프체인을 타고 Person.prototype 으로 넘어가서, 거기에 있는 constructor 에 접근해, 클래스 본체에 도달하는 방법이죠

 

즉, me.constructor.sayHi() 를 사용하면 인스턴스에서도 스태틱 매서드에 접근 할 수 있는겁니다.