프로토타입

상속(inheritance)

새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것

새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있음

클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있음

 

따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나

 

하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리

자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어

프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다름

상속 - 자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것

---

프로토타입(prototype)

자바스크립트의 모든 객체

프로토타입(prototype)이라는 객체를 가지고 있음

그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받음

모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 함

---

프로토타입 체인(prototype chain)

객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가짐

new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받음

 

예제

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

Object.prototype 객체

어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않음

자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 이 객체를 프로토타입으로 가짐

 

예제

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

프로토타입 체인(prototype chain) - 위와 같이 프로토타입이 상속되는 가상의 연결 고리

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() + "입니다.");

/*
결과 값
우리 집 강아지는 흰색 시베리안 허스키입니다.
*/

코딩연습 ▶

위의 예제에서 새롭게 추가된 weight 프로퍼티와 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 + "입니다.");

코딩연습 ▶

---

prototype 프로퍼티

prototype 프로퍼티를 이용하면, 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가 가능

예제

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://www.tcpschool.com/javascript/js_object_prototype

코딩교육 티씨피스쿨