<div id="readability-page-1" class="page"><div><h2 id="함수의-prototype-프로퍼티">함수의 prototype 프로퍼티</h2>
<pre><code>let animal = {
 eats: true
};

function Rabbit(name) {
 this.name = name;
}

Rabbit.prototype = animal; // 프로토타입 객체 설정
let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
alert( rabbit.eats ); // true</code></pre>
위와 같이 함수에서 <code>new</code> 키워드를 이용해 새로운 객체를 생성하면, 함수의 <code>.prototype</code>에 존재하는 객체가 새롭게 생성된 객체의 프로토타입 객체가 된다.
<blockquote>
참고로 자바스크립트에서는 함수도 객체이다. 단순히 객체 뒤에 괄호를 넣어 <code>객체()</code>와 같은 형태를 띄었을 때 무언가 실행할 뿐이다.
</blockquote>
<img src="https://media.vlpt.us/images/jakeseo_me/post/2521c8d5-90d1-4627-a895-b50bf8a04ce3/image.png">
<code>Rabbit.prototype</code>에 들어있던 객체가 생성자로 생성한 객체의 <code>__proto__</code>에 할당된다.
<h3 id="functionprototype과-new-function">Function.prototype과 new Function()</h3>
<blockquote>
<code>new Function()</code> 코드를 통해 생성된 객체의 <code>[[Prototype]]</code>에는 <code>Function.prototype</code>이 참조하던 객체가 들어간다.
</blockquote>
<img src="https://media.vlpt.us/images/jakeseo_me/post/2b5e65e1-9dcf-4017-a18d-61673e30d9dd/image.png">
<blockquote>
주의해야 할 것은 <code>Rabbit.prototype</code> 자체의 레퍼런스를 할당하는 것이 아니라 <code>Rabbit.prototype</code>이 가지고 있던 객체의 레퍼런스를 할당한다는 것이다. 다시 말하면 <code>Rabbit.prototype === object</code>일 때, <code>object</code>의 레퍼런스를 할당하는 것이지, <code>Rabbit.prototype</code> 자체를 할당하는 것이 아니다.
</blockquote>
<code>new Rabbit()</code>과 같이 <code>new Function()</code>이 호출될 때만 <code>Function.prototype</code>을 <code>newObject.__proto__</code>에 할당한다. 단, 프로토타입 객체의 레퍼런스를 할당해서 <code>Function.prototype</code>이 변경되면 <code>newObject.__proto__</code>도 변경된다.
단, <code>Rabbit.prototype</code>에 사용되었던 <code>animal</code>은 바뀌어도 상관없다. 왜냐하면 <code>Rabbit.prototype</code>이 <code>animal</code>을 직접적으로 참조하지 않기 때문이다.
<img src="https://media.vlpt.us/images/jakeseo_me/post/b5c2e60a-ed29-4628-a5ac-4ebeda1a9ce6/image.png">
<code>new Rabbit()</code>코드로 생성된 <code>rabbit</code>의 <code>__proto__</code>는 <code>Rabbit.prototype</code>가 가리키던 객체를 그대로 참조했기 때문에, 해당 객체의 내용을 바꾸고, <code>rabbit.__proto__</code>객체의 내용을 확인해보면 이 객체가 <code>Rabbit.prototype</code>가 가리키던 객체를 그대로 참조하고 있음을 다시 확인할 수 있다.
<img src="https://media.vlpt.us/images/jakeseo_me/post/b38d2964-52d2-4e07-85dd-278d8df9afae/image.png">
하지만, 위와 같이 <code>Rabbit.prototype</code>이 참조하는 객체를 바꿔버리는 경우에는 <code>rabbit.__proto__</code>에 변화가 없다. <code>rabbit.__proto__</code>는 이전에 <code>Rabbit.prototype</code>에 존재하던 객체를 여전히 가리키고 있을 것이다.
<h2 id="함수의-prototype-프로퍼티와-constructor-프로퍼티">함수의 prototype 프로퍼티와 constructor 프로퍼티</h2>
모든 선언된 함수는 내부적으로 <code>prototype</code> 프로퍼티를 갖는다. 그리고 그 <code>prototype</code> 내부에는 <code>constructor</code>가 들어있다.
<img src="https://media.vlpt.us/images/jakeseo_me/post/54682cc1-093e-49d1-aa43-113378b814f2/image.png">
그래서 <code>Function.prototype</code>을 강제로 수정하지 않았다면, <code>new Function()</code>으로 생겨난 어떤 객체에서도 <code>.constructor()</code>를 통해 생성자를 호출할 수 있다.
<img src="https://media.vlpt.us/images/jakeseo_me/post/43b9343c-6678-4acd-8e15-f7c946c705b1/image.png">
<img src="https://media.vlpt.us/images/jakeseo_me/post/9c4cc91e-725a-4af8-bcca-4f692f6778e2/image.png">
<img src="https://media.vlpt.us/images/jakeseo_me/post/1d4139b7-294b-420c-9e13-bbc4af9de946/image.png">
대략 위와 같은 관계가 되는데, <code>Function</code>에서는 <code>.prototype</code>을 통해 <code>Function.prototype</code>에 접근 가능하다. 그리고 <code>Function.prototype</code>에서는 <code>constructor</code>를 통해 <code>Function</code>에 접근 가능하다. 그리고 <code>new Function()</code>으로 인해 생겨난 객체에서도 또 프로토타입을 통해 <code>.constructor()</code>를 사용하여 <code>Function</code>에 접근 가능하다.
서드파티 라이브러리를 사용하다가 자바스크립트 객체가 어디서 온지 모를 때, 이를 이용하면 유용하다. 
단, 자바스크립트는 <code>constructor</code>의 값을 보장하지 않는다. 우리가 멋대로 <code>object.prototype</code>을 수정해버리면 <code>constructor</code>는 날아간다.
그래서, <code>object.prototype = {}</code> 식으로 프로토타입의 속성을 지어주는 것보다는, <code>object.prototype.a = 'value'</code>와 같은 형식으로 프로토타입을 지어줘야 <code>constructor</code>도 지키면서 프로토타입의 값도 넣어줄 수 있다.
<h2 id="예제-코드를-통해-특징-더-알아보기">예제 코드를 통해 특징 더 알아보기</h2>
<h3 id="rabbitprototype--">Rabbit.prototype = {}</h3>
<pre><code>function Rabbit() {}
Rabbit.prototype = {
 eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype = {};

alert( rabbit.eats ); // ?</code></pre>
위의 결과 값은 <code>true</code>이다 그 이유는 아무리 <code>Rabbit.prototype</code>에 <code>{}</code>라는 빈 객체를 할당해도 <code>rabbit.__proto__</code>는 <code>Rabbit.prototype</code>이 참조하던 객체를 그대로 참조한다. 되려 <code>Rabbit.prototype.eats = false</code>와 같은 코드를 입력했다면, <code>rabbit.__proto__</code>가 참조하던 객체가 직접 변경되어 결과는 <code>false</code>가 되었을 것이다.
<h3 id="rabbitprototypeeats--false">Rabbit.prototype.eats = false</h3>
<pre><code>function Rabbit() {}
Rabbit.prototype = {
 eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype.eats = false;

alert( rabbit.eats ); // ?</code></pre>
이건 위에 설명했듯, 참조하는 객체의 프로퍼티를 직접 바꾼 케이스라 결과도 <code>false</code>가 나온다.
<h3 id="delete-rabbiteats">delete rabbit.eats</h3>
<pre><code>function Rabbit() {}
Rabbit.prototype = {
 eats: true
};

let rabbit = new Rabbit();

delete rabbit.eats;

alert( rabbit.eats ); // ?</code></pre>
이 코드에서 출력하는 값은 <code>true</code>이다. <code>rabbit.eats</code>는 현재 프로토타입 객체를 거쳐 출력은 가능하지만, 실제 <code>rabbit.eats</code>에 직접적으로는 아무것도 없는 상태이기 때문이다.
<h3 id="delete-rabbitprototypeeats">delete Rabbit.prototype.eats</h3>
<pre><code>function Rabbit() {}
Rabbit.prototype = {
 eats: true
};

let rabbit = new Rabbit();

delete Rabbit.prototype.eats;

alert( rabbit.eats ); // ?</code></pre>
이 코드에서 출력하는 값은 <code>undefined</code>이다. <code>rabbit.__proto__</code>가 참조하던 객체의 <code>eats</code>를 직접 지워버렸다.
<h3 id="constructor의-활용">constructor의 활용</h3>
<img src="https://media.vlpt.us/images/jakeseo_me/post/a21a71c7-2818-4e7b-ae5c-6b632d8cfab4/image.png">
위의 로그 내용처럼 <code>constructor</code>를 <code>new person1.constructor()</code>와 같은 코드로 응용할 수도 있다. <code>new</code>라는 키워드를 이렇게 붙이는 것이 좀 낯설어보일 수 있다.
<h3 id="prototype--">prototype = {}</h3>
<pre><code>function Person(name) {
 this.name = name;
}

Person.prototype = {};

const newPerson1 = new Person("Peter");
const newPerson2 = new newPerson1.constructor("jake");

console.log(newPerson1.name);
console.log(newPerson2.name);</code></pre>
<img src="https://media.vlpt.us/images/jakeseo_me/post/f9dee1fd-1ec1-4054-be01-223b130258a5/image.png">
위 코드는 <code>Function.prototype.constructor</code>의 값은 보장되지 않는다는 특성을 이용했다. 기본적으로 <code>Function.prototype.constructor</code>는 자동으로 생성되지만, 사용자에 의해 수정될 수 있다. 위의 경우에는 <code>Function.prototype</code> 자체가 <code>{}</code>로 변해버렸다.
위의 코드를 잘 보면 <code>newPerson1.name</code>을 로그로 찍어봤을 때는 <code>Peter</code>가 잘 나오는데, <code>newPerson2.name</code>을 로그로 찍어보면 <code>jake</code>가 나오지 않는다. 그 이유는 <code>newPerson2</code>를 생성할 때 <code>newPerson1.constructor</code>로 생성을 하였는데, 우리가 <code>Person.prototype</code>를 수정하지 않았다면 정상적으로 생성됐지만, 우리는 <code>Person.prototype</code>을 <code>{}</code> 값으로 바꾸어놓았다. 그래서 자바스크립트는 <code>newPerson1.__proto__</code>에서 <code>constructor</code> 프로퍼티를 찾아보지만 찾아낼 수 없다. 그래서 자바스크립트는 <code>newPerson1.__proto__.__proto__</code>와 같이 프로토타입 체인을 타고 <code>constructor</code>를 찾으려 한다. <code>newPerson1.__proto__</code>는 <code>{}</code> 이므로, <code>{}</code>는 일반 자바스크립트 객체이고 프로토타입으로 <code>Object</code>를 갖는다. 
마침내 자바스크립트는 <code>Object.constructor</code>를 찾아 해당 코드를 수행한다. <code>Object.constructor("jake")</code> 가 실행되는데, <code>Object.constructor()</code>는 내부에 무슨 인자가 오더라도 오직 <code>{}</code>만 반환한다. 그러므로 <code>{}.name</code>은 <code>undefined</code>가 되는 것이다.
<h2 id="레퍼런스">레퍼런스</h2>
<blockquote>
<a href="https://ko.javascript.info/function-prototype">https://ko.javascript.info/function-prototype</a> 
</blockquote></div></div>

jakeseo-javascript.js 🔨

함수의 prototype 프로퍼티
let animal = {
  eats: true
};
function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype = animal; // 프로토타입 객체 설정
let rabbit = new Rabbit("White Rabbit"); //  rabbit.__proto__ == animal
alert( rabbit.eats ); // true
위와 같이 함수에서 new 키워드를 이용해 새로운 객체를 생성하면, 함수의 .prototype에 존재하는 객체가 새롭게 생성된 객체의 프로토타입 객체가 된다.
참고로 자바스크립트에서는 함수도 객체이다. 단순히 객체 뒤에 괄호를 넣어 객체()와 같은 형태를 띄었을 때 무언가 실행할 뿐이다.
Rabbit.prototype에 들어있던 객체가 생성자로 생성한 객체의 __proto__에 할당된다.
Function.prototype과 new Function()
new Function() 코드를 통해 생성된 객체의 [[Prototype]]에는 Function.prototype이 참조하던 객체가 들어간다.
주의해야 할 것은 Rabbit.prototype 자체의 레퍼런스를 할당하는 것이 아니라 Rabbit.prototype이 가지고 있던 객체의 레퍼런스를 할당한다는 것이다. 다시 말하면 Rabbit.prototype === object일 때, object의 레퍼런스를 할당하는 것이지, Rabbit.prototype 자체를 할당하는 것이 아니다.
new Rabbit()과 같이 new Function()이 호출될 때만 Function.prototype을 newObject.__proto__에 할당한다. 단, 프로토타입 객체의 레퍼런스를 할당해서 Function.prototype이 변경되면 newObject.__proto__도 변경된다.
단, Rabbit.prototype에 사용되었던 animal은 바뀌어도 상관없다. 왜냐하면 Rabbit.prototype이 animal을 직접적으로 참조하지 않기 때문이다.
new Rabbit()코드로 생성된 rabbit의 __proto__는 Rabbit.prototype가 가리키던 객체를 그대로 참조했기 때문에, 해당 객체의 내용을 바꾸고, rabbit.__proto__객체의 내용을 확인해보면 이 객체가 Rabbit.prototype가 가리키던 객체를 그대로 참조하고 있음을 다시 확인할 수 있다.
하지만, 위와 같이 Rabbit.prototype이 참조하는 객체를 바꿔버리는 경우에는 rabbit.__proto__에 변화가 없다. rabbit.__proto__는 이전에 Rabbit.prototype에 존재하던 객체를 여전히 가리키고 있을 것이다.
함수의 prototype 프로퍼티와 constructor 프로퍼티
모든 선언된 함수는 내부적으로 prototype 프로퍼티를 갖는다. 그리고 그 prototype 내부에는 constructor가 들어있다.
그래서 Function.prototype을 강제로 수정하지 않았다면, new Function()으로 생겨난 어떤 객체에서도 .constructor()를 통해 생성자를 호출할 수 있다.
대략 위와 같은 관계가 되는데, Function에서는 .prototype을 통해 Function.prototype에 접근 가능하다. 그리고 Function.prototype에서는 constructor를 통해 Function에 접근 가능하다. 그리고 new Function()으로 인해 생겨난 객체에서도 또 프로토타입을 통해 .constructor()를 사용하여 Function에 접근 가능하다.
서드파티 라이브러리를 사용하다가 자바스크립트 객체가 어디서 온지 모를 때, 이를 이용하면 유용하다. 
단, 자바스크립트는 constructor의 값을 보장하지 않는다. 우리가 멋대로 object.prototype을 수정해버리면 constructor는 날아간다.
그래서, object.prototype = {} 식으로 프로토타입의 속성을 지어주는 것보다는, object.prototype.a = 'value'와 같은 형식으로 프로토타입을 지어줘야 constructor도 지키면서 프로토타입의 값도 넣어줄 수 있다.
예제 코드를 통해 특징 더 알아보기
Rabbit.prototype = {}
function Rabbit() {}
Rabbit.prototype = {
  eats: true
};
let rabbit = new Rabbit();
Rabbit.prototype = {};
alert( rabbit.eats ); // ?
위의 결과 값은 true이다 그 이유는 아무리 Rabbit.prototype에 {}라는 빈 객체를 할당해도 rabbit.__proto__는 Rabbit.prototype이 참조하던 객체를 그대로 참조한다. 되려 Rabbit.prototype.eats = false와 같은 코드를 입력했다면, rabbit.__proto__가 참조하던 객체가 직접 변경되어 결과는 false가 되었을 것이다.
Rabbit.prototype.eats = false
function Rabbit() {}
Rabbit.prototype = {
  eats: true
};
let rabbit = new Rabbit();
Rabbit.prototype.eats = false;
alert( rabbit.eats ); // ?
이건 위에 설명했듯, 참조하는 객체의 프로퍼티를 직접 바꾼 케이스라 결과도 false가 나온다.
delete rabbit.eats
function Rabbit() {}
Rabbit.prototype = {
  eats: true
};
let rabbit = new Rabbit();
delete rabbit.eats;
alert( rabbit.eats ); // ?
이 코드에서 출력하는 값은 true이다. rabbit.eats는 현재 프로토타입 객체를 거쳐 출력은 가능하지만, 실제 rabbit.eats에 직접적으로는 아무것도 없는 상태이기 때문이다.
delete Rabbit.prototype.eats
function Rabbit() {}
Rabbit.prototype = {
  eats: true
};
let rabbit = new Rabbit();
delete Rabbit.prototype.eats;
alert( rabbit.eats ); // ?
이 코드에서 출력하는 값은 undefined이다. rabbit.__proto__가 참조하던 객체의 eats를 직접 지워버렸다.
constructor의 활용
위의 로그 내용처럼 constructor를 new person1.constructor()와 같은 코드로 응용할 수도 있다. new라는 키워드를 이렇게 붙이는 것이 좀 낯설어보일 수 있다.
prototype = {}
function Person(name) {
  this.name = name;
}
Person.prototype = {};
const newPerson1 = new Person("Peter");
const newPerson2 = new newPerson1.constructor("jake");
console.log(newPerson1.name);
console.log(newPerson2.name);
위 코드는 Function.prototype.constructor의 값은 보장되지 않는다는 특성을 이용했다. 기본적으로 Function.prototype.constructor는 자동으로 생성되지만, 사용자에 의해 수정될 수 있다. 위의 경우에는 Function.prototype 자체가 {}로 변해버렸다.
위의 코드를 잘 보면 newPerson1.name을 로그로 찍어봤을 때는 Peter가 잘 나오는데, newPerson2.name을 로그로 찍어보면 jake가 나오지 않는다. 그 이유는 newPerson2를 생성할 때 newPerson1.constructor로 생성을 하였는데, 우리가 Person.prototype를 수정하지 않았다면 정상적으로 생성됐지만, 우리는 Person.prototype을 {} 값으로 바꾸어놓았다. 그래서 자바스크립트는 newPerson1.__proto__에서 constructor 프로퍼티를 찾아보지만 찾아낼 수 없다. 그래서 자바스크립트는 newPerson1.__proto__.__proto__와 같이 프로토타입 체인을 타고 constructor를 찾으려 한다. newPerson1.__proto__는 {} 이므로, {}는 일반 자바스크립트 객체이고 프로토타입으로 Object를 갖는다. 
마침내 자바스크립트는 Object.constructor를 찾아 해당 코드를 수행한다. Object.constructor("jake") 가 실행되는데, Object.constructor()는 내부에 무슨 인자가 오더라도 오직 {}만 반환한다. 그러므로 {}.name은 undefined가 되는 것이다.
레퍼런스
https://ko.javascript.info/function-prototype

#2 프로토타입 - 심화 1

댓글