Prototypes

객체 지향 프로그래밍을 배우다보면, 항상 접하게 되는 단어 바로 prototype입니다. 대체 prototype이 무엇인지 이번 기회를 통해 알아보도록 합시다.

자세한 사항은 꼭 MDN Object prototypes을 참고해주시기 바랍니다.

1. 프로토타입 기반 언어

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다.

정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다.

JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.

2. prototype vs proto

위의 내용을 쉽게 설명하자면, prototype은 템플릿 객체입니다. 이는 실제 객체이며, 속성이나 메소드를 추가할 수 있습니다.

그러나 __proto__는 reference(참조)이며, string이라면 String.protoype, array는 Array.prototype의 객체에 reference입니다.

const arr = [1, 2, 3]

예를 들어, 위와 같은 배열 데이터가 있다면 arr.__proto__로 접근하게 되면 Array.prototype과 같은 결과를 반환하게 되는 것입니다.

3. 나만의 메소드 만들기

3.1 String 메소드

그렇다면 prototype을 이용해서 나만의 메소드를 만들 수도 있지 않을까요? String.prototype은 string 메소드가 저장되는 속성이란 점 참고해주시면 됩니다 :D

String.prototype.grumpus = function() {
	console.log("GO AWAY!!!")
}

const cat = "Blue"
cat.grumpus() // 값: "GO AWAY!!!"

String.prototype.yell = function() {
	return `OMG!!! ${this.toUpperCase()}!!!!! AGHGHGH!`
}

cat.yell() // 값: "OMG!!! CAT!!!!! AGHGHGH!"

위와 같이 prototype을 통해 나만의 메소드를 만들 수 있습니다.

3.2 Array 메소드

Array.prototype.pop = function () {
	return 'SORRY I WANT THAT ELEMENT, I WILL NEVER POP IT OFF!'
}

[3, 4, 5].pop()
// 값: "SORRY I WANT THAT ELEMENT, I WILL NEVER POP IT OFF!"

위와 같이 array에도 가능합니다.