[JavaScript] prototype

생성자 함수의 prototype 속성

모든 함수에는 prototype이라는 속성이 존재한다. 일반적인 함수로 사용할 때에는 prototype을 신경 쓸 일이 별로 없지만 함수를 객체의 생성자로 사용할 때에는 prototype 속성이 중요하다. new 키워드로 생성한 객체는 생성자 함수의 prototype 속성을 __proto__ 속성으로 접근 가능하기 때문이다.

 

위와 같이 Car이라는 생성자 함수를 이용하여 생성한 car1 객채에서는 Car의 prototype 속성에 __proto__ 속성으로 접근 가능하다. 당연히 다음과 같은 경우로는 접근할 수 없다.

 

생성자 함수로 생성한 객체의 __proto__ 속성

car1 객체의 __proto__ 속성의 특이한 점은 car1에서 바로 __proto__ 속성에 정의된 속성으로 접근이 가능하다는 점이다. 위의 예제에 이어 다음과 같이 예제를 작성하였다.

 

즉 생성자 함수를 이용하여 생성한 객체에서 __proto__ 속성에 정의된 속성은 객채에서 바로 사용 가능하다. 만약 생성한 객체에 같은 속성의 이름을 정의한다면 결과는 다음과 같다.

 

car1에서 brand라는 속성을 찾을 때 우선적으로 car1 객체에 brand라는 속성이 존재하는지 확인하고, 없다면 car1.__proto__속성에 brand라는 속성이 존재하는지 확인한다.

Protoype Chain

위의 예제에서 만약 car1.__proto__ 속성에 존재하지 않는 속성을 찾으면 어떻게 될까? 이를 위해 다음과 같은 예제를 작성하였다.

 

car1의 속성에서 madeIn을 찾으면 우선 car1의 속성에 madeIn 속성이 있는지 확인하고, 없다면 car1.__proto__ 속성에 madeIn 속성이 있는지 확인한다. 그래도 없는 경우에 car1.__proto__ 속성의 __proto__ 속성에 madeIn 속성이 있는지 확인한다. car1의 __proto__ 속성의 __proto__에는 Machine 생성자 함수의 prototype에 정의한 속성이 존재한다. 이렇게 생성자 함수로 생성한 객체의 속성을 찾을 때 객체의 속성, 객체의 __proto__ 속성, 객체의 __proto__ 속성의 __proto__ 속성과 같은 순서로 __proto__ 속성이 존재하지 않을 때까지 찾는 현상을 prototype chain이라 한다.

 

만약 Machine에도 존재하지 않는 속성에 접근하면 어떻게 될까?

 

이 경우는 undefined가 나온다. Machine은 Object라는 객체를 상속하는데 Object의 prototype에 name이라는 속성은 존재하지 않기 때문이다. Object가 상속하는 객체는 없다. 따라서 car1.__proto__에는 brand라는 속성, car1.__proto__.__proto__에는 madeIn이라는 속성 car1.__proto__.__proto__.__proto__에는 Object의 prototype에 정의한 속성이 존재하게 된다.

 

참고자료

https://www.hanbit.co.kr/store/books/look.php?p_code=B2328850940

러닝 자바스크립트

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes