[JavaScript] 객체 - 프로토타입

상속(inheritance)

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

 

- 기존 클래스를 수정하여 재사용 가능

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

- 추상화, 캡슐화와 더불어 객체 지향 프로그래밍의 중요한 특징 중 하나

- JS 는 프로토타입 기반의 객체 지향 언어

=> 현재 존재하고 있는 객체를 프로토타입으로 사용하여 해당 객체를 복제하여 재사용

 

 

프로토타입(prototype)

- 모든 객체는 프로토타입이라는 객체를 가짐

- 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받음

- 이 때, 상속되는 정보를 제공하는 객체 = 프로토타입

 

 

프로토타입 체인(prototype chain)

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

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

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

- Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며 아무런 프로퍼티도 상속받지 않음

- JS 에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype 를 프로토타입으로 가짐

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

- 프로토타입이 상속되는 가상의 연결 고리 = 프로토타입 체인

- Object.prototype 객체는 가장 상위에 존재하는 프로토타입

- 모든 객체는 Object.prototype 객체를 프로토타입으로 상속받음

 

 

프로토타입의 생성

- 가장 기본적 방법: 객체 생성자 함수 작성

- 생성자 함수 작성 & new 연산자로 객체 생성 => 같은 프로토타입을 갖는 객체 생성 가능

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

const myDog = new Dog("흰색", "마루", 1); // 이 객체는 Dog라는 프로토타입을 가짐.

- 객체 생성자 함수는 관례상 이름의 첫 문자만을 대문자로 작성

 

 

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

객체.새롭게추가할프로퍼티 = 값

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

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

console.log(myDog.breed());	// 흰색 시베리안 허스키

- 새롭게 추가된 프로퍼티는 오직 myDog 인스턴스에만 추가 => Dog 객체에는 X

 

 

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

- 생성자 함수에 직접 추가해야만 이후의 모든 객체에 적용 가능

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

const myDog = new Dog("흰색", "마루", 1);
const hisDog = new Dog("갈색", "콩이", 3);

console.log(myDog.family);
console.log(hisDog.family);
// 둘 다 => 시베리안 허스키

 

 

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;
};

const myDog = new Dog("흰색", "마루", 1);
const hisDog = new Dog("갈색", "콩이", 3);

console.log(myDog.family + " " + hisDog.family);
// 둘 다 => 시베리안 허스키

console.log(myDog.breed());	// 흰색 시베리안 허스키
console.log(hisDog.breed());	// 갈색 시베리안 허스키

- 자바스크립트 표준 객체의 프로토타입도 임의로 수정 가능하나 심각한 오류가 발생할 수 있으므로 수정하지 말 것

 

 

 

 

 

http://tcpschool.com/javascript/js_object_prototype

코딩교육 티씨피스쿨