<div id="readability-page-1" class="page"><div id="kakaoContent">

 
 <time>2021. 6. 10. 01:25</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 

 
 
 <div>
 __proto__는 (<a href="https://darrengwon.tistory.com/913" target="_blank" rel="noopener">이 글</a>)에 정리해두었다. 그런데 prototype은 또 무엇일까?

<blockquote data-ke-style="style2">Remember that&nbsp;__proto__&nbsp;means an object’s prototype. The prototype property and the new operator are a whole different topic&nbsp; - just javascript, dan abramov</blockquote>

실은,&nbsp; __proto__와 prototype은 다른 것이긴 하지만 그렇다면 완전 멀리 있는 것도 아니다.

prototype은 객체를 찍어내는 원형이라고 생각하면 된다.&nbsp;
new Number,() new String(), new Array(), new Function()... 등으로 Object를 생성할 수 있는 것은 이것들의 prototype(원형)이 있기 때문이다. 여기서 잠깐 짚고 넘어가면 좋은 것.

* 함수도 객체고 배열도 객체다.
* number 같은 경우 타입은 원시값인데 왜 객체냐? constructor가 왜 필요한데? =&gt; String과 같은 원시값들을 감싼 Primitive wrapper objects 임.

클래스에서 인스턴스를 찍어내는 것처럼, js에서는 prototype으로 함수, 배열과 같은 Object를 찍어낸다.


이러한 prototype에는 메서드나 속성 등이 붙을 수 있고, prototype에 의해 생성된 Object는 이러한 메서드나 속성을 가진다.&nbsp;
Array.prototype에 있는 map, filter 등과 같은 속성들은 Array prototype에 정의되어 있기 때문이다.
<pre id="code_1623255684476" data-ke-language="javascript" data-ke-type="codeblock"><code>// Array.prototype.map 사용
[1, 2, 3].map(el =&gt; el + 1)</code></pre>

이렇게 생성된 object들에게 __proto__는 prototype을 가리킨다. 특정 object의 속성이 없으면 __proto__를 타고 올라가면서 해당 속성을 찾을 때까지 프로토타입 체인을 타고 올라간다. 자세한 내용은 이미 (<a href="https://darrengwon.tistory.com/913">이 글</a>)에 정리했다.
<pre id="code_1623255870902" data-ke-language="javascript" data-ke-type="codeblock"><code>let cat = { teeth: 32 }
let dog = { __proto__: cat }

dog.hasOwnProperty("teeth") // false. 프로토타입 체인 타지 말고 확인
console.log(dog.teeth) // 32. 프로토타입 체인을 타고 올라감</code></pre>

결론적으론, 아래의 코드를 통해서 prototype과 __proto__ 사이의 관계를 살펴볼 수 있다.
<pre id="code_1623255004585" data-ke-language="javascript" data-ke-type="codeblock"><code>function Person(name, age) {
 this.name = name;
 this.age = age;
}

// Person으로 인해 construct된 객체는 sayName이라는 메서드를 갖게 된다.
Person.prototype.sayName = function () {
 console.log(this.name);
};

const me = new Person('darren', 13); // 함수 객체 생성. 객체이므로 me라는 객체는 __proto__ 지니고 있음
me.sayName(); // "darren"

console.log(me.__proto__); //__proto__는 prototype을 가리킴 =&gt; { sayName: [Function (anonymous)] }
</code></pre>

물론, 실제 코딩할 땐 프로토타입은 일종의 '숨김' 역할을 하기 때문에 굳이 적극적으로 프로토타입 메서드를 만들지는 않았다.
실제로도 프로토타입을 사용하는 것은 그렇게 권장되지 않는다고 한다. (Dan abramov 피셜임 ㅇㅇ)


 
 
					
 
 
 </div>

 
 
 
 
 
 


 

 
 
 
 </div></div>

HotHandCoding

DarrenKwon

__proto__는 (이 글)에 정리해두었다. 그런데 prototype은 또 무엇일까?
 
Remember that __proto__ means an object’s prototype.
The prototype property and the new operator are a whole different topic 
- just javascript, dan abramov
 
실은,  __proto__와 prototype은 다른 것이긴 하지만 그렇다면 완전 멀리 있는 것도 아니다.
 
prototype은 객체를 찍어내는 원형이라고 생각하면 된다. 
new Number,() new String(), new Array(), new Function()... 등으로 Object를 생성할 수 있는 것은 이것들의 prototype(원형)이 있기 때문이다. 여기서 잠깐 짚고 넘어가면 좋은 것.
 
* 함수도 객체고 배열도 객체다.
* number 같은 경우 타입은 원시값인데 왜 객체냐? constructor가 왜 필요한데? => String과 같은 원시값들을 감싼 Primitive wrapper objects 임.
 
클래스에서 인스턴스를 찍어내는 것처럼, js에서는 prototype으로 함수, 배열과 같은 Object를 찍어낸다.
 
 
이러한 prototype에는 메서드나 속성 등이 붙을 수 있고, prototype에 의해 생성된 Object는 이러한 메서드나 속성을 가진다. 
Array.prototype에 있는 map, filter 등과 같은 속성들은 Array prototype에 정의되어 있기 때문이다.
// Array.prototype.map 사용
[1, 2, 3].map(el => el + 1)
 
이렇게 생성된 object들에게 __proto__는 prototype을 가리킨다. 특정 object의 속성이 없으면 __proto__를 타고 올라가면서 해당 속성을 찾을 때까지 프로토타입 체인을 타고 올라간다. 자세한 내용은 이미 (이 글)에 정리했다.
let cat = { teeth: 32 }
let dog = { __proto__: cat }
dog.hasOwnProperty("teeth") // false. 프로토타입 체인 타지 말고 확인
console.log(dog.teeth) // 32. 프로토타입 체인을 타고 올라감
 
결론적으론, 아래의 코드를 통해서 prototype과 __proto__ 사이의 관계를 살펴볼 수 있다.
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// Person으로 인해 construct된 객체는 sayName이라는 메서드를 갖게 된다.
Person.prototype.sayName = function () {
  console.log(this.name);
};
const me = new Person('darren', 13); // 함수 객체 생성. 객체이므로 me라는 객체는 __proto__ 지니고 있음
me.sayName(); // "darren"
console.log(me.__proto__); //__proto__는 prototype을 가리킴 => { sayName: [Function (anonymous)] }
 
물론, 실제 코딩할 땐 프로토타입은 일종의 '숨김' 역할을 하기 때문에 굳이 적극적으로 프로토타입 메서드를 만들지는 않았다.
실제로도 프로토타입을 사용하는 것은 그렇게 권장되지 않는다고 한다. (Dan abramov 피셜임 ㅇㅇ)

proto vs prototype

댓글

__proto__ vs prototype

댓글

proto vs prototype