[JavaScript] 자바스크립트 프로토타입(prototype)이란?

프로토타입(prototype)

 프로토타입은 모든 객체가 공통적으로 가지고 있는 속성이라고 할 수 있습니다. 객체가 생성되면 자동으로 그 객체는 prototype이라는 속성을 가지게 됩니다. 또한 객체에 prototype에 값이 추가되거나 변경되면 같은 형태의 객체들도 똑같은 값을 가지게 됩니다. 이런 기능을 이용하여 클래스가 존재하지 않는 자바스크립트에서 상속과 비슷한 기능을 할 수 있게됩니다.

 

예시

function Number(a, b) {
  this.a = a;
  this.b = b;
}

var one = new Number(1, 2);
var two = new Number(3, 4);

  위와 같이 Number라는 생성자 함수를 만들고 객체를 생성하여 one과 two 변수에 대입했습니다. 이 때, 생성한 객체에 인자로 받은 값들을 출력하는 기능을 추가하고 싶다면 함수를 정의한 부분에 출력 함수를 추가를 해야 됩니다. 하지만 prototype을 이용하면 쉽게 기능을 추가할 수 있습니다.

 

prototype을 이용할 경우

Number.prototype.sum = function() {
  console.log(this.a + this.b);
}

Number 객체의 prototype에 sum 속성을 추가함과 동시에 두 수의 합을 출력하는 함수를 대입하고 있습니다.

 

function Number(a, b) {
  this.a = a;
  this.b = b;
}

var one = new Number(1, 2);
var two = new Number(3, 4);

// 프로토타입에 속성 추가
Number.prototype.sum = function() {
  console.log(this.a + this.b);
}

one.sum(); // 결과: 3
two.sum(); // 결과: 7

 변수 one, two에서 추가된 sum 속성을 사용해보면 모두 작동이 되는 것을 확인할 수 있습니다. 각각 변수에 대입된 Number 객체들은 prototype이라는 하나의 속성을 공유하기 때문입니다.

 

프로토타입 체인

 프로토타입 체인은 프로토타입에서 값을 찾기 위한 검색 방법입니다. 프로토타입으로 추가된 값들은 프로토타입 체인에 의해 값에 접근하게 됩니다.

 

예시

// One에는 number 속성이 존재함
function One() {}
One.prototype.number = 1;

// Two에는 number 속성이 존재하지 않음 -> One 검색
function Two() {}
Two.prototype = new One();

var two = new Two();

// Two에서 number 속성을 검색
console.log(two.number);

 Two의 프로토타입에는 One 객체가 추가되었고 One의 prototype에는 number 속성이 추가된 것을 확인할 수 있습니다.

1. 변수 two에서 number 속성에 접근하려고 하기 위해서 Two의 선언문으로 가지만 number 속성이 없으므로 prototype에서 값을 찾게 되고 One의 선언문으로 가게 됩니다.

 

2. One에도 number 속성이 없기 때문에 One의 prototype에서 값을 찾게 되고 그 값을 참조하여 사용하게 됩니다.

 

결과

1