<div id="readability-page-1" class="page"><div><h2 id="__proto__"><code>__proto__</code></h2>
<img src="https://media.vlpt.us/images/jakeseo_me/post/18104a6e-129f-42f6-860e-f83088d15cc9/image.png">
<code>__proto__</code>는 사실 더 이상 권장되지 않는 기능이다. 최근 관련된 웹 표준에서 사라졌을 수 있으며, 혹은 사라지는 중일 수 있다. 물론, 호환성을 위해 아직 없애지 않는 브라우저가 대부분이긴 할 것이다. <code>__proto__</code>를 사용하기보다는 가능하다면 존재하는 코드를 업데이트하여 <code>__proto__</code>의 사용을 자제하자. 
<img src="https://media.vlpt.us/images/jakeseo_me/post/38855840-3414-4c01-a032-913b533fdea4/image.png">
호환성 목록에서 어떤 환경에서 호환하지 않는지 볼 수 있다.
<h2 id="모던한-프로토타입-메소드들">모던한 프로토타입 메소드들</h2>
현대식 자바스크립트에서 프로토타입을 다루기 위한 모던한 메소드들이 있다.
<ul>
<li><code>Object.create(proto, [descriptors])</code>: <code>[[Prototype]]</code>이 <code>proto</code>를 참조하는 빈 객체를 만든다. 이 때, 프로퍼티 설명자도 추가로 넘길 수 있다.</li>
<li><code>Object.getPrototypeOf(obj)</code>: <code>obj</code>의 <code>[[Prototype]]</code>을 반환한다.</li>
<li><code>Object.setPrototypeOf(obj, proto)</code>: <code>obj</code>의 <code>[[Prototype]]</code>이 <code>proto</code>가 되도록 설정한다.</li>
</ul>
<blockquote>
앞으로는 <code>__proto__</code>대신 위의 메소드를 이용해서 프로토타입 관련 기능을 작성하자.
</blockquote>
<h3 id="모던-프로토타입-메소드-활용해보기">모던 프로토타입 메소드 활용해보기</h3>
<pre><code>const module = {
 detach: true,
 attach: true
}

const monitor = Object.create(module);

alert(`monitor.detach = ${monitor.detach}`); // true
alert(`monitor.attach = ${monitor.attach}`); // true

alert(Object.getPrototypeOf(monitor) === module); // true

// 아이맥의 모니터라면?
Object.setPrototypeOf(monitor, {detach: false, attach: false});

alert(`monitor.detach = ${monitor.detach}`); // false
alert(`monitor.attach = ${monitor.attach}`); // false

alert(Object.getPrototypeOf(monitor) === module); // false</code></pre>
위와 같이 활용해볼 수 있다.
<h3 id="프로퍼티-설명자-이용해보기">프로퍼티 설명자 이용해보기</h3>
<img src="https://media.vlpt.us/images/jakeseo_me/post/1d8f715e-746e-4d21-86d4-d590184abe43/image.png">
간단하게 설명자로 프로퍼티 플래그를 건드려보고 출력해본 결과이다.
<h2 id="모던-프로토타입은-왜-생겨난것인가">모던 프로토타입은 왜 생겨난것인가?</h2>
일단 모던 프로토타입 메서드를 어떻게 사용하는지를 먼저 배워봤는데, 그렇다면 기존에 <code>__proto__</code> 도 엄청 편했던 것 같은데, 뭐가 문제여서 모던 프로토타입 메서드를 권장하는 것일까?
<ul>
<li>프로토타입 기능 자체는 원래 오래된 것이다.</li>
<li>2012년, <code>Object.create()</code>가 등장하여 프로토타입이 설정된 객체를 만들어낼 수 있게 되었다.</li>
<li><code>__proto__</code>가 등장하여 마음대로 프로토타입을 얻거나 설정할 수 있게 되었다.<ul>
<li>그러나 이 기능을 이용해 프로토타입을 마음대로 바꾼다면, 자바스크립트 엔진의 최적화를 방해한다.</li>
</ul></li>
<li>2015년, <code>getPrototypeOf</code>와 <code>setPrototypeOf</code>가 표준에 추가되었다.</li>
</ul>
<blockquote>
그러나 여전히 <code>Object.setPrototypeOf</code>로도 마음대로 프로토타입을 바꾸게 되면 자바스크립트 엔진의 최적화가 저해된다.
</blockquote>
<h2 id="아주-단순한-객체">'아주 단순한' 객체</h2>
<ul>
<li>객체는 키-값 쌍을 저장할 수 있는 단순한 연관 배열이다.</li>
<li>그럴 일은 잘 없지만, <code>__proto__</code>를 키로 이용하여 값을 넣게 되면 값이 제대로 들어가지 않는다.</li>
</ul>
<pre><code>const obj = {};

const key = prompt("사용할 key를 입력", "__proto__");
obj[key] = "value";

alert(obj[key]);</code></pre>
위의 코드가 제대로 작동하지 않는 이유는 <code>__proto__</code>에는 객체만 들어갈 수 있기 때문이다. 그래서 <code>[object Object]</code>가 나오는 것이다.</div></div>

jakeseo-javascript.js 🔨

__proto__
__proto__는 사실 더 이상 권장되지 않는 기능이다. 최근 관련된 웹 표준에서 사라졌을 수 있으며, 혹은 사라지는 중일 수 있다. 물론, 호환성을 위해 아직 없애지 않는 브라우저가 대부분이긴 할 것이다. __proto__를 사용하기보다는 가능하다면 존재하는 코드를 업데이트하여 __proto__의 사용을 자제하자. 
호환성 목록에서 어떤 환경에서 호환하지 않는지 볼 수 있다.
모던한 프로토타입 메소드들
현대식 자바스크립트에서 프로토타입을 다루기 위한 모던한 메소드들이 있다.
Object.create(proto, [descriptors]): [[Prototype]]이 proto를 참조하는 빈 객체를 만든다. 이 때, 프로퍼티 설명자도 추가로 넘길 수 있다.
Object.getPrototypeOf(obj): obj의 [[Prototype]]을 반환한다.
Object.setPrototypeOf(obj, proto): obj의 [[Prototype]]이 proto가 되도록 설정한다.
앞으로는 __proto__대신 위의 메소드를 이용해서 프로토타입 관련 기능을 작성하자.
모던 프로토타입 메소드 활용해보기
const module = {
  detach: true,
  attach: true
}
const monitor = Object.create(module);
alert(`monitor.detach = ${monitor.detach}`); // true
alert(`monitor.attach = ${monitor.attach}`); // true
alert(Object.getPrototypeOf(monitor) === module); // true
// 아이맥의 모니터라면?
Object.setPrototypeOf(monitor, {detach: false, attach: false});
alert(`monitor.detach = ${monitor.detach}`); // false
alert(`monitor.attach = ${monitor.attach}`); // false
alert(Object.getPrototypeOf(monitor) === module); // false
위와 같이 활용해볼 수 있다.
프로퍼티 설명자 이용해보기
간단하게 설명자로 프로퍼티 플래그를 건드려보고 출력해본 결과이다.
모던 프로토타입은 왜 생겨난것인가?
일단 모던 프로토타입 메서드를 어떻게 사용하는지를 먼저 배워봤는데, 그렇다면 기존에 __proto__ 도 엄청 편했던 것 같은데, 뭐가 문제여서 모던 프로토타입 메서드를 권장하는 것일까?
프로토타입 기능 자체는 원래 오래된 것이다.
2012년, Object.create()가 등장하여 프로토타입이 설정된 객체를 만들어낼 수 있게 되었다.
__proto__가 등장하여 마음대로 프로토타입을 얻거나 설정할 수 있게 되었다.
그러나 이 기능을 이용해 프로토타입을 마음대로 바꾼다면, 자바스크립트 엔진의 최적화를 방해한다.
2015년, getPrototypeOf와 setPrototypeOf가 표준에 추가되었다.
그러나 여전히 Object.setPrototypeOf로도 마음대로 프로토타입을 바꾸게 되면 자바스크립트 엔진의 최적화가 저해된다.
'아주 단순한' 객체
객체는 키-값 쌍을 저장할 수 있는 단순한 연관 배열이다.
그럴 일은 잘 없지만, __proto__를 키로 이용하여 값을 넣게 되면 값이 제대로 들어가지 않는다.
const obj = {};
const key = prompt("사용할 key를 입력", "__proto__");
obj[key] = "value";
alert(obj[key]);
위의 코드가 제대로 작동하지 않는 이유는 __proto__에는 객체만 들어갈 수 있기 때문이다. 그래서 [object Object]가 나오는 것이다.

#4 프로토타입 - 심화 3 - deprecated proto과 모던 프로토타입 메소드들

댓글

#4 프로토타입 - 심화 3 - deprecated __proto__과 모던 프로토타입 메소드들

댓글

#4 프로토타입 - 심화 3 - deprecated proto과 모던 프로토타입 메소드들