- Published on
JavaScript의 프로토타입 (Prototype) 이해하기
- Authors
- Name
- Inhwan Cho
JavaScript는 프로토타입 기반 언어입니다. 즉, 자바스크립트의 모든 객체는 자신의 원형(Prototype) 이 되는 객체를 가지며 이를 프로토타입이라고 한다
각각의 JavaScript 객체는 프로토타입을 가리키는 숨겨진 링크가 있으며, 이 덕분에 상속의 개념을 구현할 수 있습니다.
다만, __proto__ 라는 속성으로 참조할 수 있으나 이는 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야 합니다.
프로토타입이란 무엇인가요?
프로토타입은 객체 간 특정 속성이나 메소드를 상속하기 위한 원형 객체입니다.
즉, 어떤 객체의 프로토타입은 다른 객체에 있는 속성이나 메소드를 참조할 수 있게 합니다.
예를 들어, 다음은 Animal 객체를 생성한 뒤, Dog 객체의 프로토타입으로 설정하여 Dog도 Animal의 특성을 상속받게 하는 예시입니다:
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
}
function Dog(name) {
Animal.call(this, name); // Animal의 속성을 `Dog`에 적용합니다.
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const dog = new Dog('Rex');
dog.speak(); // Rex makes a sound.
위 예시에서 Dog 객체는 Animal의 speak 메소드를 상속받습니다. 이렇게 하여 Dog 인스턴스가 생성될 때, Animal의 메소드를 사용할 수 있게 됩니다.
프로토타입 체인이란?
프로토타입 체인은 객체가 속성이나 메소드를 찾기 위해 프로토타입 링크를 따라 연결된 일련의 객체들입니다.
즉, 어떤 객체에서 특정 속성이나 메소드를 찾으려 할 때, JavaScript는 해당 객체의 프로토타입에서 그 속성이나 메소드를 찾고, 없으면 그 프로토타입의 프로토타입을 찾는 과정을 반복합니다.
이러한 방식으로, 필요한 속성이나 메소드를 찾거나, 최종적으로는 Object.prototype에 도달하여 찾지 못하면 undefined를 반환합니다.
예를 들어, Dog 프로토타입 체인은 다음과 같은 구조를 가질 수 있습니다:
Dog인스턴스Dog.prototype(Animal의 메소드를 상속 받음)Animal.prototypeObject.prototypenull