JavaScript Prototype

자바스크립트의 프로토타입이란?

 

JavaScript는 프로토타입 기반의 언어

• 프로토타입 기반의 언어는 객체 간 직접 상속이 이루어진다.
• 객체는 prototype이라는 특별한 속성을 가지는에 이 속성은 다른 객체에 대한 참조의 역할을 한다
• 객체의 특정 속성에 접근하려고 할 때 그 속성이 해당 객체에 없다면 자바스크립트는 그 객체의 prototype을 확인한다
• 이러한 과정은 모든 객체의 프로토타입인 Object.prototype까지 도달하게 되는데 이렇게 연결된 프로토타입들을 프로토타입 체인이라고 한다

프로토타입 체인(예시)

프로토타입 다이어그램

1. 위 다이어그램은 car라는 함수를 선언하고 그 함수의 prototype에 drive라는 메서드를 추가한 뒤 이를 이용하여 myCar라는 객체를 생성하는 과정
2. 다이어그램에서 myCar객체는 drive메서드를 직접 가지고 있지 않지만 Car의 프로토타입을 통해 drive 메서드에 접근할 수 있게 된다
3. 또한 Car는 Object의 프로토타입을 상속받기 때문에 myCar 객체는 Object의 메서드인 toString과 valueOf도 사용할 수 있다

프로토타입 체인의 예시를 js코드로 작성한다면 아래와 같다

// Car 생성자 함수 정의
function Car() {}

// Car의 프로토타입에 drive 메서드 추가
Car.prototype.drive = function() {
    console.log('driving...');
}

// Car 함수를 이용해 myCar 객체 생성
var myCar = new Car();

// myCar 객체는 Car의 프로토타입을 통해 drive 메서드에 접근
myCar.drive();  // "driving..."가 출력

// Car는 Object의 프로토타입을 상속받기 때문에 myCar 객체는 Object의 메서드도 사용이 가능해진다
console.log(myCar.toString());  // [object Object] 출력

위 예시에서 설명한 것과 같이 myCar객체는 직접 drive메서드를 가지고 있지 않지만 프로토타입인 Car.prototype을 통해 dirve 메서드에 접근하게 된다

Car.prototype역시 마찬가지고 자신의 프로토타입인 Object.prototype의 메서드를 사용할 수 있기 때문에 toString()을 사용했을 때 해당 정보를 콘솔에 출력할 수 있게 된다

프로토타입 상속

• 객체의 특정 속성에 접근하려고 할 때 JS는 먼저 그 객체 자체에서 해당 속성을 찾게 된다
• 만약 해당 객체에 그 속성이 없으면 객체의 프로토타입에서 속성을 찾게 된다
• 프로토타입에도 객체가 없다면 해당 프로토타입의 프로토타입에서 속성을 찾는 과정을 반복하게 된다
• 이러한 방법으로 프로토타입 체인을 따라 속성을 찾는 과정을 프로토타입 상속이라고 한다