[코어JS] 6. 프로토타입(prototype) - 상

프로토타입이란?

function 기계() {
  this.q = 'strike';
  this.w = 'snowball';
}

var nunu = new 기계();

비슷한 오브젝트 여러개를 찍어내고 싶을 때 생성자함수와 new키워드를 사용함. 부모가 가진 프로퍼티를 자식도 가지게 됨. JS에서 부모가 자식에게 프로퍼티를 물려주는 방법이 두 가지가 있는데, 그 중 한가지가 이것이고 다른 한가지가 prototype임.

console.log(기계);
/*
  f 기계(){
      this.q = 'strike';
      this.w = 'snowball';
   }
*/

console.log(기계.prototype); // {constructor: f}

기계를 찍으면 기계가 찍히는 것은 당연함. 그런데 기계와 함께 생성되는 비밀 공간 prototype도 찍힘. 이는 유전자라고 이해하면 편함. 부모가 자식에게 유전자처럼 물려줌.

function 기계() {
  this.q = 'strike'; // 자식도 프로퍼티를 가짐
  this.w = 'snowball'; // 자식도 프로퍼티를 가짐
}

기계.prototype.name = 'kim'; // 부모만 가지게 되나 자식도 사용가능함

var nunu = new 기계();

console.log(nunu); // 기계 {q:'strike', w: 'snowball'}
/*
  자세히 쓰면 아래와 같음
  기계 {
    q: 'strike',
    w: 'snowball',
    __proto__: { constructor: ƒ 기계(), name: 'kim' }
  }
*/
console.log(nunu.name); // "kim"

프로토타입은 임의로 수정할 수 있음. 위 코드와 같이 프로토타입에 name 프로퍼티를 추가하면 자식에도 해당 프로퍼티가 생성됨. 실제 프로퍼티가 추가되는 것은 아니지만 사용할 수 있음.

이처럼 JS에서 프로퍼티 상속은 생성자 함수에서 직접 주는 방법과, 프로토타입에 추가하는 방법이 있음.

원리

nunu.name과 같이 object에서 자료를 뽑을 때, nunu에 name항목이 있으면 사용하고, 없으면 부모의 유전자로 가서 찾음. 이것을 반복하는 것이 '프로토타입 체인'.

var 어레이 = [4, 2, 1];
어레이.sort();
console.log(어레이); // [1, 2, 4];

배열을 선언할 때 별개의 sort 메서드를 할당하지 않았음에도 사용할 수 있음. var 어레이 = [4, 2, 1];를 하면 내부적으로 var 어레이 = new Array(4, 2, 1);의 형태로 실행됨. Array라는 생성자함수의 유전자에 sort가 기록돼있기 때문에 사용할 수 있는 것. 실제로 Array.prototype을 찍어보면 sort라는 프로퍼티가 있음.

활용

arr = [1, 2, 3];
Array.prototype.함수 = function(){console.log('hi');}
arr.함수(); // 'hi'

프로토타입은 임의로 수정이 가능함. 예를들어, 코드 중에 '배열에서 3을 삭제하는 함수' 등과 같이 자주 사용되는 함수가 있을 경우 이를 프로토타입에 저장해서 모든 배열에서 사용할 수 있음.