Javascript 프로토타입(prototype) 이론

 

 

프로토타입(prototype) 

 

 

객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 

 

 

 

 

 

 

• new을 이용해 만든 constructor 즉 생성자가 새로운 객체를 만들면 이 새로운 객체에 생성자의 프로토타입이라는 내용이 새로운 객체의 __proto__라는 것을 통해 연결되어 생성자을 참조하게 된다. 즉 생성자.prototype와 객체.__proto__는 같은 객체를 바라본다는 뜻이다.
• 그리고 __proto__는 생략이 가능하다. 한마디로 프로토타입으로 연결되어 생성된 객체가 생성자의 메소드들을 꺼내서 마음대로 쓸 수 있다는 것이다.

 

 

 

 

• 만약 Array 생성자가 새로운 생성 객체 배열[1,2,3]을 만들었다면 생성자에는 __proto__ 이 있는데 이 안에는 새롭게 생성한 객체 배열인 Array()을 비롯하여 많은 메소드들이 들어있다.
• 즉 위의 내용은 prototype으로 생성자와 생성된 객체가 연결되어있다는 사실을 확인 할 수있다.

 

 

 

 

 

 

 

 

 

 

프로토타입 예시 코드

 

 

• 위의 코드 중 var로 선언한 모든 변수가 똑같이 새로운 생성자를 만들어낸 생성자 Person를 바라본다.
• 어떤식으로든 건너건너 만나는 것은 생성자 Person이라는 것을 알수 있다.

 

 

 

 

 

• 위의 두 코드의 차이를 보면 한 쪽은 많은 코드가 보이고 다른 한 쪽은 코드량이 줄어 깔끔해 보인다. 코드가 많은 쪽을 보면 중복된 부분이 많아 보인다.
• 이때 프로토타입의 성질을 이용하면 오른쪽 코드와 같이 효율적으로 코드량을 줄일 수도 있다. gomu와 iu 변수 둘다 똑같은 생성된 객체를 바라보고 있으니 둘 다 같은 프로토타입을 공유중인 것을 눈치 챌 수 있다. 그래서 프로토타입을 이용하여 코드를 경량화 시킬 수 있었다.

 

 

• 위의 코드에서 주의할 점은 __proto__을 생략안하고 호출 할 경우 this가 prototype 범위까지 정의되므로 숫자로 인식을 하지 못해 undefind 상태가 되어 값을 숫자로 계산할 수 없게 될 수도 있다.
• 만약 __proto__을 생략하지 않는다면 오른쪽 코드와 같이 Person.prototype.age 자체에 값을 변수로 선언해주어야 한다.

 

 

 

 

 

 

 

 

최상위 객체 object와 프로토타입

 

문자나 숫자 객체는 object라는 최상위 객체로부터 생성된 객체들이라고 볼 수 있다.

그래서 문자와 숫자 객체의 prototype들은  object의 prototype로부터 메소드를 상속 받을 수 있다는 결론을 내릴 수 있다. 한마디로 object의 prototype에는 모든 데이터 타입이 쓸 수 있는 메소드들이 들어있다고 볼 수 있다. 즉 숫자나 문자 객체에서 위로 올라가 원하는 메소드를 찾을 수 없다면 object까지 메소드를 찾아 올라갈 수 있다. 

 

 

 

 

• 하지만 object는 최상위에 있다보니 다른 숫자나 문자와 같은 객체들과 같이 prototype을 이용하여 중간에 메소드를 가져올 수 없다. 
• 그래서 할 수 없이 object 생성자 함수는 prototype으로 말고 생성자 자신 자체에서 쓸 수 있는 메소드들을 따로 넣어두었다.

 

 

 

 

 

 

• 위의 코드의 호출 결과를 보면 최상위에 object가 존재한다는 것을 확인 할 수 있다. 각자 다르게 결과가 호출되는데 이는 생성자의 메소드의 tostring이 각자 위치마다 설정된 형태로 있기 때문이다.
• 첫 번째는 결과는 arr.tostring의 함수이고 두 번째 결과는 call메소드를 사용하여 불러들인 arr 배열이며 마지막 결과는 건너건너 올라가 결국 object 위치의 메소드 tostring가 실행되어 결과가 다르게 등장한다.

 

 

 

 

 

 

 

인프런의 정재남 강사님의 강의를 참조하였습니다.

https://www.inflearn.com/instructors/46840/courses