보다 나은 자바스크립트 - 프로토타입 속성

자바스크립트에서는 객체의 속성^property에 접근을 할 경우 해당 속성이 있는지의 여부를 확인하는 특별한 순서가 있습니다.

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.toString = function() {
    return this.make + " " + this.model + " (" + this.year + ")";
  }
}
var myCar = new Car("Subaru", "Forester", 2003);
var rating = myCar.fuelRating;

위 코드에서 마지막 행을 살펴보겠습니다.

1. 자바스크립트는 가장 먼저 myCar객체에 fuelRating속성이 있는지 탐색합니다.
2. myCar객체에 fuelRating속성이 없다면 myCar객체의 프로토타입 속성^{prototype property}을 탐색합니다.(프로토타입 체인^{prototype chain}이라고도 불립니다.)
3. myCar객체에 프로토타입 속성에도 fuelRating속성이 없다면 2번으로 다시 돌아가 프로토타입 속성을 계속 탐색하게 됩니다.

쉽게 말하면 아래와 같은 방식입니다.

myCar.fuelRating 있습니까?
없다면 myCar.prototype.fuelRating 있습니까?
없다면 myCar.prototype.prototype.fuelRating 있습니까?
없다면 myCar.prototype.prototype.prototype.fuelRating 있습니까?
...

이렇게 fuelRating속성이 프로토타입 체인에서 탐색이 될때까지 계속 됩니다. 아니면 프로토타입 속성이 존재하지 않는 경우 입니다.

생성자에 의해 만들어진 객체들의 모든 속성, 메서드등은 이 프로토타입 속성에 의해 보전^holds되어 집니다.
이것은 마치 자바의 class와 비슷합니다.

우리가 기억해야 할 것은 객체에 속성을 추가 하는 것은 이전 포스팅에서 말했듯이 언제든 가능 하다는 것 입니다.
즉, 프로토타입 속성도 객체에 언제든 추가 할 수 있다는 것이고 생성자에서 정의한 속성처럼 사용 할 수 있다는 것입니다.

아래 코드에서의 Element처럼 브라우저마다 주어진 클래스의 기능을 사용하고 싶지 않을 경우 여러분만의 메서드등을 추가하여 사용 할 수 있습니다.

--- in JS ---
Element.prototype.hide = function() {
  this.style.display = "none";
}

Element.prototype.show = function() {
  this.style.display = "";
}

--- in HTML ---
<p>
Hello there. Click this: <input type="button" value="Click me" onclick="document.getElementById('fred').hide();" />
</p>
<p id="fred">Text to be hidden</p>

프로토타입 속성은 자바스크립트의 OO프로그래밍 중 상속에서 매우 중요한 역할을 합니다.
다음 포스팅에서는 자바스크립트의 상속에 대하여 알아보도록 하겠습니다.