[Javascript] Prototype

1. Prototype이란?

Prototype은 Class가 없는 Javascript에서 객체 기반 프로그래밍을 구현할 수 있도록 객체의 원형을 뜻하는 prototype 객체를 뜻합니다. 기존의 객체를 복사하여 새로운 객체를 생성할 수 있으며 복사된 객체는 기존 객체의 원형인 proptotype 객체를 참조합니다. 참조된 prototype 객체는 __proto__ 프로퍼티에서 확인 할 수 있습니다. 

2. 함수의 prototype

예를들어 test라는 이름의 함수를 정의하면 test의 prototype 속성은 javascript의 function기능이 제공하는 객체 원형인 prototype 객체를 참조합니다. 또한 함수를 정의하면 함수 객체로 표현할 수 있으며, 해당 함수 객체의 prototype 프로퍼티는 생성자 함수를 호출 할 수 있는 constructor를 소유합니다. 일반 객체는 생성자 함수가 없습니다. 

//함수 객체의 prototype
function test () {}
test.prototype // {constructor: ƒ}

//일반 객체의 prototype접근
let obj = {}
obj.prototype // undefined

또한 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖고 있으며, prototype 객체를 참조하지만 직접 접근 할 수 없도록 __proto__ 프로퍼티로만 접근 할 수 있습니다.

 

test 함수의 __proto__는 자바스크립트에서 제공하는 Function.prototype를 가리는데 여기서 native code는 브라우저가 제공하는 내장 메소드 이기 때문에 노출되지 않음을 뜻합니다. 

3. 함수의 Custom Prototype 확장

함수를 정의하고 해당 함수의 생성자(constructor)를 이용한 새로운 객체를 만들어 원형이 되는 prototype을 공유할 수 있습니다.

let originFunc = function() {};
//originFunc 함수객체 prototype sum 메소드 추가
originFunc.prototype.sum = function (a, b) {
    return a + b + ' 입니다.'
}

let newObj = new originFunc(); // 상속
newObj.sum(1,2);  // '3 입니다.'

4. Prototype Chain

Javascript에서는 특정 객체의 prototype이 제공하는 기능 (메소드, 프로퍼티) 활용할 수 있습니다. 이때 해당객체가 접근하고자 하는 메소드 또는 프로퍼티가 없다면 [[Prototype]]이 가리키는 링크를 따라 부모 프로토타입 객체를 검색합니다. 이것을 Prototype Chain이라고 합니다.

5. 다양한 객체 생성방법

// 객체 리터럴 방식 - 객체내의 데이터인 컨텐츠를 그대로 대입하는 방법
let person = {
  name: 'kim',
  sayHello: function () {
    console.log(`Hello! My name is ${this.name}.`);
  }
}

// 타입별 생성자 함수 new (ex. String, Object, Array, Number)
let str = new String();
str.__proto__ === String.prototype // true

let obj = new Object();
obj.__proto__ === Object.prototype // true

// 일반 함수의 생성자 함수 new
let func = function () {};
let newObj = new func();
newObj.__proto__ === func.prototype // true

PS. ES6부터 Javascript에도 Class 기능이 생기고, Typescript를 활용하면서 prototype을 이용하여 이제는 like Class 형태의 코딩을 하지는 않습니다만 Javascript는 prototype기반 객체 지향 언어이기 때문에 꼭 깊이있게 알아둬야 할 개념인 것 같습니다. 

 

참고사이트
https://www.howdy-mj.me/javascript/prototype-and-proto

https://bamdule.tistory.com/195

https://poiemaweb.com/js-prototype