Javascript prototype

Prototype 이란

• Javascript에서 객체지향적 프로그래밍을 할 수 있도록 해주는 개념입니다.
• 객체를 생성하게 되면 객체 원형과 그 객체에 상응하는 prototype의 객체가 하나 더 생성되고, 객체 원형은 그 prototype을 참조합니다. (구조는 아래 원문 이미지 내에서 코드와 함께 설명드리겠습니다.)

---

객체의 Prototype과 최상위 Prototype, 그리고 생성자

위 코드를 보면, Person이라는 function을 작성하고, 그것을 객체로서 생성하여 hye변수에 대입시킵니다. 그리고 hye객체를 확인해 보면 Person으로 된 객체이며, 그 객체 내에 Prototype이 있고, 그 Prototype 내에는 constructor(생성자)와 또 다른 Prototype이 있습니다. 

이 구조는 아래의 이미지와 함께 보시면 조금 더 이해에 도움이 될 것입니다.(만,,,, 좀 복잡합니다.)

눈여겨 볼 것은 2가지의 prototype과 constructor(생성자)입니다.

 

아래 세가지는 아래의 이미지와 함께 보시면 좋을 사항들입니다.

1. javascript는 객체를 생성하게 되면 일반 객체(Person)와 그 객체의 Prototype Object가 생성되게 됩니다. 일반 객체는 Prototype 객체를 참조하기 때문에 일반 객체를 통하여 Prototype내에 있는 속성들에 접근 & 사용할 수 있습니다.
2. javascript에는 Java Object 클래스와 비슷하게 최상위 Prototype이 존재합니다.
3. constructor를 보면 Person f(function)인 것을 확인할 수 있습니다. 이는 첫 줄 코드 'function Person(name){}'이 Person객체의 생성자 함수 그 자체인 것을 확인할 수 있습니다.

hye(Person)가 참조하는 Person의 Prototype이 있고, 그 상위에 Prototype이 하나 더 존재합니다. 이 Prototype은 모든 객체의 최상위 Prototype Object입니다.

------------------------------------------------------------------------------------------------------------------------------

! Person객체와 hye에서 Prototype에 접근하는 방법이 다릅니다. 주의하여 주세요.

여기서 같이 볼 것은 Person.prototype.constructor.prototype.constructor.prototype... 무한궤도가 그려진다는 것입니다. 이 코드로 하여금 위에서 말했던 '생성자 함수 그 자체인 것'이 무슨 뜻인지 조금은 이해가 갔을 거라 생각합니다. (아래 이미지와 위 이미지내에 주황색 화살표 참고)

Person에서의 접근 (Person.prototype)

hye에서의 접근 (.__proto__)

 

---

Javascript의 Overriding

번외로 Java에 overriding이 있듯이 javascript에도 overriding이 있다. 아래 이미지를 보면 toString 함수가 상위에도 있고, 하위에도 있다. 이럴 땐, 하위 것이 호출되게 된다.

---

객체에 속성 추가하기와 객체의 Prototype에 속성 추가하기

• 객체에 속성 추가하는 방법은 'this'를 이용하는 것입니다.

• Prototype에 속성을 추가하는 방법은 Person.prototype.key값 또는 hye.__proto__.key값 을 이용하는 것입니다.

.__proto__

.prototype