[Javascript] prototype 이란?

 

 

 

함수 객체의 Prototype

 

Javascript에서 함수만이 유일하게 가지는 프로퍼티가 있다. 바로 prototype 프로퍼티다.  함수의 prototype 프로퍼티는 생성자 함수가 생성하는 인스턴스의 프로토타입을 가리키게 된다.

 

익명 함수 객체

익명 함수 객체를 func12에 할당한 후 hasOwnProperty() 함수를 호출해서 prototype 프로퍼티를 소유하는지 확인하면 true값을 반환한다.

 

 

함수 객체

func3 함수 객체를 생성해서 hasOwnProperty() 메소드로 prototype 프로퍼티를 소유하고 있는지 확인하면 true값이 나온다.

 

Arrow Function

Arrow Function으로 함수 객체를 생성한 뒤 prototype 프로퍼티를 소유한지 확인하면 false값이 나온다. Arrow Function은 함수 객체가 아니라는 말인가? func4의 타입을 찍어보면 function을 반환한다. 즉 Arrow Function은 함수객체임에도 불구하고 prototype 프로퍼티를 가지지 않는 객체다.

 

함수 객체만이 소유하고 있는 prototype 프로퍼티는 생성자 함수가 생성할 객체의 프로토타입을 가리키게 된다. 즉 생성자 함수로써 호출할 수 없는 함수인 Arrow Function은 non-constructor에 속하고 prototype도 소유하지 않게 되는 것이다. 

 

일반 객체

일반 객체는 prototype 프로퍼티를 소유하지 않는다.

 

함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 모든 객체가 Object.prototype로 부터 상속받는 __proto__ 접근자 프로퍼티와 동일한 프로토타입을 가리키게 된다.

 

일반 객체의 __proto__ 접근자 프로퍼티

 

 

함수 객체의 prototype 프로퍼티

 

일반 객체의 __proto__ 접근자 프로퍼티와 함수 객체의 prototype은 동일한 프로토타입을 가리키고 있지만 사용하는 주체가 다르다. 일반 객체의 경우 객체 자신이 프로토타입에 접근하기 위해 __proto__를 사용한다면 함수 객체의 prototype은 생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해서 prototype 프로퍼티를 사용한다.

 

생성자 함수의 prototype 프로퍼티와 일반 객체의 __proto__를 비교해보면 타입과 값 모두 정확히 일치한다.

 

 

prototype의 constructor 프로퍼티

 

모든 prototype은 constructor 프로퍼티를 가지고 있다. constructor 프로퍼티는 자신을 참조하고 있는 생성자 함수를 가리키고 있다. 함수 객체가 생성될 때 constructor 프로퍼티와 생성자 함수의 연결이 생성된다.

 

생성자 함수를 통해 인스턴스를 생성한 후 인스턴스의 constructor 프로퍼티와 생성자 함수를 비교하면 일치값이 출력된다. 

 

 

user1 객체는 constructor 프로퍼티를 소유하고 있지 않지만 user1 객체의 프로토타입 User.prototype에는 constructor 프로퍼티를 소유하고 있다. user1 객체는 __proto__ 접근자 프로퍼티를 사용해 constructor을 상속받아 사용할 수 있게 된다. 최종적으로 객체에는 constructor 함수의 결과물인 name : 'About-Tech' 가 할당된다.

 

 

생성된 user1 객체의 __proto__를 살펴보면 User 생성자 함수의 prototype과 동일한 프로퍼티를 상속받아 온 것을 확인할 수 있다. 이런 방식으로 생성자 함수와 객체간의 연결이 이뤄진다.

 

 

 

 

 

 

[Javascript] __proto__ 접근자 프로퍼티 이해하기

[Javascript] Prototype 이란?