Front-end/JavaScript

JS 프로토타입 4편 - prototype객체와 __proto__속성

파리외 개발자 2023. 1. 23. 19:16

__proto__ & prototype

이번 글은 프로토타입 상속계층을 이해하고 있다는 가정하에 작성되었습니다.

//only function has prototype
function multiplyBy5(num){
  return num*5
}

multiplyBy5.prototype

multiplyBy5.__proto__===Function.prototype

multiplyBy5.__proto__.__proto__===Object.prototype

multiplyBy5.__proto__.__proto__.__proto__===null

정의한 함수 multiplyBy5의 __proto__속성을 타고 올라가면

multiplyBy5 < Function < Object < null

순서로 상속을 받고 있는 것을 볼 수 있다.

그럼 여기서 상속해 주는 개체의 prototype속성은 뭐길래 __proto__속성이 가리키고 있을까?

정의한 함수 자체의 prototype객체를 살펴보면 constructor 함수

즉, 생성자 함수임을 알 수 있다.

생성자 함수 (Constructor: f)

typeof Object//function

const obj={}//Object constructor

typeof obj//object

typeof Object.prototype//object

obj.prototype//undefined

Object의 타입은 함수로 나온다.

Object의 타입이 객체로 나오지 않는 이유는 

Object는 객체 타입의 객체들을 생성시켜주는 함수이기 때문이다.

obj 객체를 생성할 때는 Object생성자 함수가 암묵적으로 obj를 

상속하며 생성시켜 주고 이렇게 했을 때 함수 Object는 

object타입의 객체를 생성시켜 준다.

또한 함수는 prototype속성을 가지며 이는 생성자 함수도 예외는 아니다.

그리고 함수의 prototype의 타입은 객체라고 나온다.

마찬가지로 위에서 정의했던 함수 또한 prototype속성을 가지며 객체 타입을 가진다.

이는 함수의 프로토타입 속성이 가리키는 것은 함수 프로토타입 객체임을 알려준다.

여기서 함수의 프로토타입 속성이 가리키는 함수 프로토타입 객체가 가지는

constructor속성은 다시 또 자기 자신을 가리킨다.

  • 함수는 생성될 때 자신과 같은 이름의 프로토타입 객체가 생성된다.
  • 함수는 prototype속성을 가진다.
  • 함수의 prototype속성은 자신과 같은 이름의 프로토타입 객체를 가리킨다.
  • 자신과 같은 이름의 프로토타입 객체는 constructor속성을 가진다.
  • 프로토타입 객체의 constructor속성은 자기 자신인 함수를 가리킨다.
  • 함수와 프로토타입 객체는 서로를 가리킨다.

그리고 함수만이 prototype객체를 가진다.

array

배열을 사용해 하나의 예시를 더 들어보겠다.

const arr=[]

arr.prototype//undefined

Array.prototype//array

배열 arr는 함수가 아니기 때문에 prototype객체를 가지지 않고

따라서 prototype속성 또한 가지고 있지 않는다.

배열을 생성해 주는 Array생성자는 함수이기 때문에 prototype객체를 가진다.

그리고 이 Array생성자 함수의 프로토타입 객체는 배열의 내장메서드들을 저장하고 있으며

이 프로토타입 객체를 사용해 배열생성자 함수는 배열을 만들어준다.