JavaScript의 OOP - 객체 및 Dunder Proto 심층 분석

In this post, originally published here we shall dive a bit deeper into nature of objects, and cover the Dunder Proto concept.

This post is part of the Advanced JavaScript series where I try to explain essential advanced JS concepts in a simple manner.

물체의 성질

아래 개체를 고려하십시오-

let details = {
name: 'Richard Hendricks',
company: 'Pied Piper',
};

위 객체에서 company 속성에 접근을 시도하면 company 이 details 객체의 기존 속성이기 때문에 가능하다.

그러나 아래 스니펫은 undefined을 반환합니다.

console.log(details.designation); //undefined

designation 내부에 details 이라는 속성이 없기 때문입니다. 이것이 바로 우리가 개체의 동작을 기대하는 방식입니다.

그러나 아래 예를 살펴보십시오.

let arr = [1, 2, 4, 5, 7];

console.log(arr.map( () => 21 );

출력은 다음과 같습니다.



그러나 map() 은 arr 내부의 메서드가 아닙니다. 그렇다면 이것은 어떻게 계산되며 어디에서 오는 것일까요?

던더 프로토 __proto__

JavaScript의 모든 개체 내부에는 Dunder Proto이라는 특수 속성이 있습니다. __proto__ (단어 proto 이라는 단어 양쪽에 이중 밑줄이 수반됨)이라는 이 객체가 표현되는 방식으로 인해 이름이 만들어졌습니다.

위 이미지에서 볼 수 있듯이 객체 arr(및 기본적으로 JS에서 생성하는 모든 객체)에는 [[Prototype]]:Array 속성이 있으며 그 안에 __proto__ 이 있습니다. 예제에서 이 [[Prototype]]: Array 속성을 확장하면 __proto__ 을 볼 수 있어야 하며 여기에는 every , forEach , map , splice 등과 같은 방대한 메서드 목록이 포함되어 있습니다.



여기서 주목해야 할 점은 우리가 생성하는 각 개체에는 __proto__ 속성에 서로 다른 키-값 쌍 세트가 있다는 것입니다.

정의된 객체에 존재하지 않는 속성을 호출/액세스하려고 할 때마다 JS 엔진은 해당 속성을 검색하기 위해 __proto__ 체인(또는 토끼 🐇 구멍)으로 이동합니다. 위의 경우에서 우리는 배열(객체)에서 map() 메서드를 계산하려고 시도했고 동일한 것을 찾기 위해 __proto__ 체인을 따라 내려갔습니다.

이것은 개체의 숨겨진 특성이 모든 배열, 개체 및 문자열 메서드를 수행할 수 있도록 허용하는 방법입니다.
__proto__은 개체의 특수 속성이므로 액세스할 수도 있습니다. __proto__ 아래에 있는 새 속성을 위의 details 개체에 추가하고 싶다고 가정해 보겠습니다. 방법은 다음과 같습니다.

details.__proto__.alertMsg = function () {
alert(`Hello Dunder Proto => __proto__`);
}

이 기능은 이제 아래에서 볼 수 있는 것처럼 __proto__ 속성에 추가되었습니다.




우리는 JavaScript에서 객체의 숨겨진 특성과 Dunder Proto의 기본 사항을 배웠습니다. 다음 게시물에서는 Dunder Proto를 사용하여 코드를 보다 효율적으로 만드는 이유와 위치에 대해 알아볼 것입니다.

다음 시간까지! 🙌