[JS] 프로토타입(prototype)

프로토타입

상속

상속이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다.

상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다. 또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화 할 수 있는 장점이 있습니다. 따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다.

하지만 C#이나 C++과 같은 클래스 기반의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반의 객체지향 언어입니다. 프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체지향 언어와는 약간 다릅니다. 자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 합니다.

프로토타입

자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있습니다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 합니다.

프로토타입 체인

자바스크립트에서는 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가집니다. 또한, new연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받습니다.

 

var obj = new Object(); // 이 객체의 프로토타입은 Object.prototype 입니다.
var arr = new Array(); // 이 객체의 프로토타입은 Array.prototype 입니다.
var date = new Date(); // 이 객체의 프로토타입은 Date.prototype 입니다.

 

하지만 Obejct.prototype객체는 어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않습니다. 또한, 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 이 객체를 프로토타입으로 가집니다.

 

var date = new Date(); // 이 객체는 Date.prototype 뿐만아니라 Object.prototype도 프로토타입으로 가집니다.

 

위와 같이 프로토타입이 상속되는 가상의 연결 고리를 프로토타입 체인이라고 합니다. Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입 입니다. 따라서 자바스크립트의 모든 객체는 Object.prototype 객체를 프로토타입으로 상속받습니다.

프로토타입의 생성

프로토타입을 생성하는 가장 기본적인 방법은 객체 생성자 함수(object constructor function)를 작성하는 것입니다. 생성자 함수를 작성하고 new연산자를 사용해 객체를 생성하면, 같은 프로토타입을 가지는 객체를 생성할 수 있습니다.

 

function Dog(color, name, age){ // 개에 관한 생성자 함수를 작성
  this.color = color; // 색에 관한 프로퍼티
  this.name = name; // 이름에 관한 프로퍼티
  this.age = age; // 나이에 관한 프로퍼티
}

var myDog = new Dog("흰색", "마루", 1); // 이 객체는 Dog 라는 프로토타입을 가짐
document.write("우리집 강아지는" + myDog.name + "라는 이름의" + myDog.color + "털이 매력적인 강아지 입니다.)

객체에 프로퍼티 및 메소드 추가

 

이미 생성된 객체에 새로운 프로퍼티나 메소드를 추가하는 방법은 다음과 같습니다.

 

function Dog(color, name, age) {
  this.color = color;
  this.name = name;
  this.age = age;
}

var myDog = new Dog("흰색", "마루", 1);
myDog.family = "시베리안 허스키"; // 품종에 관한 프로퍼티를 추가
myDog.breed = function () {
  // 털색을 포함한 품종을 반환해주는 메소드를 추가
  return this.color + " " + this.family;
};

document.write("우리집 강아지는" + myDog.breed() + "입니다.");

 

위의 예제에서 새롭게 추가된 family프로퍼티와 breed() 메소드는 오직 myDog인스턴스에만 추가됩니다. 이미 생성된 다른 Dog 객체나 차후에 생성되는 어떠한 다른 dog 객체에도 추가되지 않습니다.

 

프로토타입에 프로퍼티 및 메소드 추가

 

프로토타입에 새로운 프로퍼티나 메소드를 추가하는 것은 객체에 추가할 때와는 다른 방법을 사용해야 합니다. 프로토타입의 경우에는 생성자 함수에 직접 추가해야만 이후에 생성되는 모든 다른 객체에도 적용할 수 있습니다.

 

function Dog(color, name, age) {
  this.color = color;
  this.name = name;
  this.age = age;
  this.family = "시배리안 허스키"; // 프로토타입에 프로퍼티를 추가할 때에는 기본값을 가지게 할 수있습니다.

  this.breed = function () {
    return this.color + " " + this.family;
  };
}

var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("갈색", "콩이", 3);
document.write(
  "우리 집 강아지는" +
    myDog.family +
    "이고, 친구네 집 강아지도" +
    hisDog.family +
    "입니다",
);

프로토타입 프로퍼티

 

프로토타입 프로퍼티를 이용하면 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있습니다.

 

function Dog(color, name, age) {
  this.color = color;
  this.name = name;
  this.age = age;
}
// 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함.
Dog.prototype.family = "시베리안 허스키";
// 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함.
Dog.prototype.breed = function () {
  return this.color + " " + this.family;
};

var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("갈색", "콩이", 3);
document.write(
  "우리 집 강아지는 " +
    myDog.family +
    "이고, 친구네 집 강아지도 " +
    hisDog.family +
    "입니다.",
);

document.write("우리 집 강아지의 품종은 " + myDog.breed() + "입니다.<br>");
document.write("친구네 집 강아지의 품종은 " + hisDog.breed() + "입니다.");

 

직접 생성한 프로토타입은 위와 같이 새로운 프로퍼티나 메소드를 마음껏 추가하거나 삭제 할 수 있습니다. 물론 자바스크립트 표준 객체의 프로토타입도 임의로 수정할 수 있으나, 심각한 오류가 발생할 가능성이 있습니다. 따라서 자바스크립트 표준 객체의 프로토타입은 수정해서는 안됩니다.

 

 

---

참고 : http://tcpschool.com/javascript/js_object_prototype