[Javascript] Prototype (프로토타입)

 

 

JavaScript는 흔히프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. - MDN

 

Why Prototype?

이전 글들에서 말했다시피, 자바스크립트는 오직 원시타입과 객체 타입밖에 존재 하지 않습니다. 그렇기에, 다른 언어들과 달리 inheritance(상속)을 이루는 방법이 조금 다릅니다. 대신, prototype의 정의를 통해 상속을 이뤄냅니다. 그렇기에 자바스크립트를 프로토타입 기반 언어라 합니다.

 

바로 예시를 볼까요?

const Dovigod = {
  name : 'dovi'
}
console.dir(Dovigod)

 

분명 Dovigod이라는 객체에 name 프로퍼티만 정의해줬는데, 정작 로그를 보니, 'prototype'이라는 프로퍼티와 함께, 대응하는 값으로 Object가 있습니다. 그리고 Object의 내부엔, 수많은, 유틸 함수들이 존재합니다.

 

정리하자면, 객체 'Dovigod'은 프로토타입으로 'Object'를 두고있고, 그렇기에, 프로토타입 Object에 정의된 모든 프로퍼티에 접근할 수 있습니다.

 

말 그대로 객체 Dovigod은, Object를 상속한다 볼 수 있습니다.

( **참고로 자바스크립트 엔진에 의해, 숨겨진 프로퍼티로 __proto__라는 속성이 존재합니다만, deprecated될 요소이므로 생략**)

 

간단한 예제를 통해 직접 프로토타입을 작성해보겠습니다.

const person = {
  firstname : 'Default',
  lastname : 'Default',
  getFullName: function() {
    return this.firstname + ' ' + this.lastname
  }
}

let john = {
  firstname : 'John',
}
//or
john = Object.create(person);
john.firstname: 'John';

john.__proto__ = person; //inherites
console.dir(john)
console.log(john.lastname)

           (예시에선 __proto__를 직접조작 하였으나, 실제로는 추천되지 않는 행위이니, 테스트용으로만 하세요!)

 

보시다시피, john 객체의 프로토타입으로, person 객체를 설정해주니, person 객체를 전부 상속받는것을 알 수 있습니다.

 

 

함수 생성자 'new'

함수도 객체이기에, 마찬가지로, 상속 혹은 확장가능합니다.

다만 일반 객체와는 다르게, 추가적으로 사용가능한 것들이 있는데, 그 중 하나가, 'new'연산자 입니다.

 

이쯤되면, 저희가 아는 클래스 인스턴스 생성방법과 똑같다 볼 수 있습니다.

 

먼저 자바스크립트에서 'new'연산자는 생성 함수를 프로토타입 삼는 객체를 반환하게 됩니다.

function Asp(a, b){
  console.log(this); // {a , b} or Window(line 6)
  this.a = a;
  this.b = b;
}
Asp()
console.log(new Asp()); // protoType = Asp

매개 변수 a,b를 this.a , this.b에 넣는점이 constructor와 똑같죠?

 

Related Topics

1) Primitive Constructor (원시타입 생성자)

가끔 알고리즘 문제 풀거나 할때나 타입스크립트 사용할 때, 이런 표현 보신적 있나요?

const number1 = new Number(3);
const string1 = new String('hello world');

위 예시에서, number1, string1을 출력해보면, 3 , 'hello world'이렇게 나옵니다.

다만, 저렇게 표현하는것과 원시값 그대로 표현하는것과 무슨 차이가 있을까요?

 

생성자를 통해 생성된 원시값은, 그 자체로 객체이고, 원시값은 그대로 원시값입니다.

한번 비교를 해보면 다음과 같습니다.

 

console.log(3 == new Number(3)); // true : coerced to number type
console.log(3 === new Number(3)); // false:  deep comparison

new 원시값생성함수() <- 로 생성된 객체는 "primitive Value"라는 내장 프로퍼티를 갖게 됩니다.

따라서, '==' 단순 비교 시, 형변환으로 인해, new Number(3)은 number타입으로 변환되고,

깊은 비교 시,  말 그대로 원시값 vs 객체값 비교이기에, 위와 같은 결과가 일어납니다.

 

 

prototype chaining , arrow func , methods.. 추가 예정