[자바스크립트] 프로토타입(Prototype)

프로토타입(Prototype)

---

자바스크립트에서 프로토타입은 두가지의 의미를 혼용해서 사용하고 있습니다.

프로토타입의 두가지 의미

1. __proto__ : 상위에서 물려 받은 객체의 프로토타입에 대한 정보 (prototype link)

2. prototype : 자신의 프로토타입 객체 다시 말하면, 하위로 물려줄 프로토타입의 정보 (prototype object)

function Animal() {};
console.dir(Animal);

- 코드 1 -

코드 1 실행 결과

코드 1 다이어그램

정의한 Animal 함수의 __proto__는 Animal 객체를 생성할 때 사용될 원형 프로토타입을 가르키고 있습니다. (두가지 의미중 첫번째, prototype link)

Animal 함수의 prototype은 Animal의 프로토타입을 가르키고 있습니다. (두가지 의미 중 두번째, prototype object)

조금만 더 응용해 보겠습니다.

function Animal() {};
Animal.prototype.bark = function () { console.log("왈왈!"); };
var dog = new Animal();
var cat = new Animal();
console.dir(Animal);
console.dir(dog);
console.dir(cat);

- 코드 2 -

코드 2 실행 결과

프로토 타입 다이어로그 2

생성한 cat 객체와 dog 객체의 __proto__(prototype link)는, cat 객체와 dog 객체를 생성한 프로토타입 객체를 가르키고 있습니다.

프로토타입 체인(Prototype Chain)

---

코드 2에서 dog.bark()를 실행하면 어떤 결과를 얻게 될까요?? 짐작하신 대로 "왈왈!" 이라는 결과를 얻게 됩니다.

dog 객체에는 bark라는 함수가 정의 되어 있지 않지만, Animal 프로퍼티에는 bark라는 함수가 정의 되어 있고, Animal 프로퍼티에 정의된 bark의 결과 값을 얻게 됩니다.

이와 같이 현재의 객체에서 어떠한 기능을 호출하였는데, 찾지 못하면 상위로 올라가 찾게 됩니다.

이러한 개념(반복하여 상위로 올라가면서 찾는)을 프로토타입 체인(Prototype Chain)이라고 합니다.

sitemap.xml