[javascript] 프로토타입이 무엇인가

 

프로토타입은 자바스크립트의 객체 지향 프로그래밍에서 매우 중요한 개념으로, 객체가 다른 객체의 메서드와 속성을 상속받을 수 있게 하는 메커니즘입니다. 이를 이해하기 위해 프로토타입의 정의와 동작 방식, 그리고 실생활 비유와 예제를 통해 설명하겠습니다.

프로토타입의 정의

프로토타입은 자바스크립트의 모든 객체가 가지고 있는 숨겨진 속성으로, 다른 객체로부터 메서드와 속성을 상속받는 데 사용됩니다. 자바스크립트는 프로토타입 기반 언어로, 클래스 기반 언어와 달리 상속을 구현하기 위해 프로토타입 체인을 사용합니다.

실생활 비유

프로토타입을 실생활에 비유하면 이해가 쉬워집니다. 예를 들어, 가구 공장에서 테이블을 만드는 과정을 생각해봅시다.

1. 템플릿(원형): 공장에서는 테이블을 만들기 위해 "테이블 템플릿"을 가지고 있습니다. 이 템플릿에는 테이블의 기본 구조와 기능이 정의되어 있습니다. 이 템플릿이 프로토타입이라고 생각할 수 있습니다.
2. 개별 테이블: 이 템플릿을 사용하여 만들어진 각각의 테이블은 개별 객체입니다. 모든 테이블은 템플릿의 특성을 공유하지만, 개별 테이블마다 색상이나 크기와 같은 고유한 특성을 가질 수 있습니다.
3. 상속: 만약 "책상"이라는 새로운 종류의 테이블을 만든다면, 이 책상은 "테이블 템플릿"을 기반으로 만들되, 추가적으로 서랍이나 책꽂이 같은 기능을 더할 수 있습니다. 이때 책상은 테이블 템플릿의 특성을 상속받아 기본 기능을 유지하면서도 새로운 기능을 추가합니다.

자바스크립트에서 프로토타입

자바스크립트에서 모든 객체는 프로토타입이라는 숨겨진 속성을 가집니다. 이 프로토타입은 객체가 다른 객체의 메서드와 속성을 사용할 수 있게 합니다. 객체의 프로토타입은 [[Prototype]]이라는 내부 프로퍼티로 참조되며, 이는 Object.getPrototypeOf(obj)를 통해 접근할 수 있습니다.'

 

 

// Bird 생성자 함수
function Bird(name, sound) {
    this.name = name;
    this.sound = sound;
}

// Bird 프로토타입에 메서드 추가
Bird.prototype.fly = function () {
    console.log(`${this.name} ${this.sound} 비행중`);
};

// Eagle 생성자 함수
function Eagle(name, sound, prey) {
    Bird.call(this, name, sound);  // Bird 생성자 호출
    this.prey = prey;
}

// Eagle이 Bird를 상속받도록 설정
Eagle.prototype = Object.create(Bird.prototype);
Eagle.prototype.constructor = Eagle;

// Eagle 프로토타입에 메서드 추가
Eagle.prototype.hunt = function () {
    console.log(`${this.name} ${this.prey} 사냥중`);
};

// 인스턴스 생성
const eagle = new Eagle('독돌이', '푸드덕', '토끼');

// 메서드 호출
eagle.fly();  // 독돌이 푸드덕 비행중
eagle.hunt(); // 독돌이 토끼 사냥중

// 프로토타입 체인 확인
console.log(eagle instanceof Eagle); // true
console.log(eagle instanceof Bird);  // true

 

 

 

프로토타입 체인

자바스크립트 객체는 프로토타입 체인을 통해 다른 객체의 속성과 메서드를 사용할 수 있습니다. 프로토타입 체인은 객체가 특정 속성이나 메서드를 찾지 못하면, 프로토타입 체인을 따라 상위 객체의 프로토타입에서 해당 속성이나 메서드를 찾는 방식으로 동작합니다.

예제 설명

1. 객체 생성:

const eagle = new Eagle('독돌이', '푸드덕', '토끼');

 

 

Eagle 생성자를 통해 eagle 객체가 생성됩니다. 이 객체는 Eagle의 프로토타입을 통해 Bird의 메서드도 사용할 수 있습니다.

 

2. 메서드 호출

 

 

eagle.fly();  // 독돌이 푸드덕 비행중
eagle.hunt(); // 독돌이 토끼 사냥중

 

 

eagle.fly()를 호출하면 Eagle의 프로토타입 체인을 따라 Bird.prototype에 있는 fly 메서드가 호출됩니다. eagle.hunt()는 Eagle.prototype에 정의된 메서드를 직접 호출합니다.

 

3. 프로토타이 ㅂ체인 확인

 

console.log(eagle instanceof Eagle); // true
console.log(eagle instanceof Bird);  // true

 

 

1. eagle 객체는 Eagle과 Bird의 인스턴스입니다. 이는 Eagle이 Bird를 상속받았기 때문에 가능한 일입니다.

결론

프로토타입은 자바스크립트의 객체가 다른 객체의 메서드와 속성을 상속받는 데 사용하는 메커니즘입니다. 이를 통해 객체는 메모리를 절약하고, 공통 기능을 공유하며, 객체 간 상속 관계를 설정할 수 있습니다. 프로토타입 체인은 객체가 특정 속성이나 메서드를 찾을 때 상위 객체의 프로토타입을 따라가는 경로로, 이를 통해 효율적인 코드 재사용과 상속을 구현할 수 있습니다.