프로토타입이 뭘까

milkbottle·2024년 7월 7일

JavaScript

프로토타입

현재는 ESMAScript 버전이 다양하게 나왔다.

ES6 부터 고급 철기 시대의 기술인 class가 지원되었는데, 그 전에는 원시인들이 반달돌칼로 유사 클래스를 구현했다.

그것이 바로 프로토타입이다.

예시

대충 이렇게 배열을 생성했다고 해보자..

[4,2,3,1]나 Array(4,2,3,1) 표현방법은 뭐 다르지만 효과는 같다.

이렇게 생성하고.. __proto__을 쳐보자.

뭐가 많은 함수들이 튀어나온다!

그런데 어디서 많이 본 함수들이다. 바로 Array에서 사용하는 것들이다.

자바스크립트로 코테를 볼 때 레퍼런스로 참고하는 사이트.. MDN 여기서 prototype 이렇게 되어있는 곳이 전부 prototype을 사용한 것이다.

정의

프로토타입은 객체를 클래스로 생각하고 멤버변수나 함수라고 생각하면 쉽다.

객체를 통해 인스턴스를 생성하고, 이 인스턴스끼리 공유할 수 있는 무언가가 생기는 것이다.

ES5이하에서는 class가 없었기에 Array는 그냥 단순한 객체였고, 이 객체에서 만들어진 변수들끼리 공유하는 기능을 prototype을 쓰면 된다.

응용

이러한 함수를 만들면 new 키워드를 이용해 함수를 객체로써 만들 수 있다.

그런데 여기서 name, gender는 각 인스턴스(실제로 인스턴스는 아니지만 유사하니까)마다 다르다.

클래스(이것도 실제로 클래스는 아니지만 유사하니까) 메서드, 클래스 스태틱 멤버변수로 공유되는 무언가를 만들고 싶다면 다음처럼 사용한다.

.prototype으로 직접 출력() 함수와, 헤헤 변수를 선언한다.

이후 출력해보면...?

헤헤 와 출력() 이 잘 공유되어 나옴을 볼 수 있다.

상속

function User(name, gender){
    this.name = name;
    this.gender = gender;
    this.print = function() {
        console.log(`안녕? 내 이름은 ${this.name}이다.`);
        console.log(`성별은 ${this.gender}이다.`);
    };
};

function 한국인(spicy){
    this.spicy = spicy;
    this.맵부심 = function() {
        console.log(`엽떡 ${this.spicy}단계는 기본이지 ㅋ`);
    };
};

const 사람원 = new User('사람 1', 'male');
const 맵찌리 = new 한국인(5);