프로트타입은 자바스크립트에서 어쩌면? 가장 핵심적인 내용이라고도 볼 수 있습니다.
'함수는 객체다.' 라는 말을 들어보셨을 겁니다.
function a(x, y) {
return x - y;
}
a.add = "No add";
console.log(a.add);
이런 식으로 add를 추가시켜서 Key/Value 를 가질 수 있습니다.
추가를 시킬 수도 있지만 기존에 있던 것들도 사용할 수 있습니다.
평소에도 많이 보셨던 a.name, a.length 등 이렇게 사용할 수 있는게 바로 함수가 객체이고
자바스크립트가 프로트타입 방식이기 때문입니다.
예제와 이미지를 통해 설명을 하면 이해하기 더 쉽겠지만 이번 포스팅에선 간단하게 글로만
제가 이해한 것을 바탕으로 적어만 두고, 나중에 한번 수정할 예정입니다.
자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 생성해 놓습니다.
해당 함수를 생성자 함수로 사용할 경우
ex) new연산자 (a = [], a{} 또한 new 연산자와 똑같다.)
생성된 인스턴스에 숨겨진 __proto__ 라는 프로퍼티가 생성이 되는데 이 프로퍼티는
생성자 함수의 prototype 프로퍼티를 참조합니다.
__proto__ 는 생략이 가능하도록 구현이 되어 있기 때문에 prototype에 있는 메서드나 프로퍼티를
생성한 인스턴스에서도 자신의 것처럼 해당 메서드나 프로퍼티에 접근을 할 수 있습니다.
ex) Array.map , Array.length ...
prototype에는 constructor라는 프로퍼티가 존재하며 이는, 생성자 함수 자신을 가리킵니다.
이 프로퍼티는 인스턴스가 자신의 생성자 함수가 무엇인지를 알고자 할 때 필요한 수단입니다.
결국 __proto__를 쭉 찾아가다보면 Object.prototype에 도달하게 되고, 하나하나씩 __proto__에서 __proto__를
찾는 과정을 프로토타입 체이닝이라고 부르며 프로토타입 체이닝을 통해 각 프로토타입 메서드를
자신의 것처럼 호출할 수 있습니다. 이때 접근 방식은 자신으로부터 가장 가까운 대상부터 찾아나가며,
원하는 값을 찾으면 검색을 중단합니다. (스코프 체인과 비슷한 방식)
'JavaScript > JavaScript' 카테고리의 다른 글
[JavaScript]두 배열 안에 오브젝트를 비교 후 중복된 값 제거 (0) | 2020.12.13 |
---|---|
[일기]async await 비동기 방식 처리 (0) | 2020.08.20 |
[JavaScript] var, let, const ? (0) | 2020.08.09 |
[JavaScript] 클로저(closure) 정의 (0) | 2020.08.09 |
[JavaScript] 스코프(Scope)는 뭘까? (0) | 2020.08.09 |