{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/Prototype/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"d548778b-eb44-57aa-84ba-f96c9a2318fa","excerpt":"어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype…","html":"

어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다.

\n

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

\n

\n

\n

조금 더 자세히, 그리고 구체적으로 들여다보자.

\n

우리가 기본적으로 알아햐나는 개념 한 가지가 있다. 객체는 함수(Function)로 생성된다는 것이다.

\n
function Person() {} // => 함수\nvar personObject = new Person(); // => 함수로 객체를 생성
\n

personObject 객체는 Person이라는 함수로 생성된 객체이다. 이렇듯 언제나 객체는 함수에서 시작된다. 우리가 많이 쓰는 일반적인 객체 생성도 예외는 아니다.

\n
var obj = new Object(); // === var obj = {};
\n

위 코드에서 Object가 자바스크립트에서 기본적으로 제공하는 함수다.

\n

\n

\n

이제 본격적으로 prototype에대해 알아보자.

\n
function Person() {\n  this.eyes = 2;\n  this.nose = 1;\n}\n\nvar kim  = new Person();\nvar park = new Person();\n\nconsole.log(kim.eyes);  // => 2\nconsole.log(kim.nose);  // => 1\n\nconsole.log(park.eyes); // => 2\nconsole.log(park.nose); // => 1
\n
\n

메모리에는 eyes와 nose가 두 개씩 총 4개 할당된다. 객체를100개 만들면 200개의 변수가 메모리에 할당된다

\n
\n

\n

\n
function Person() {}\n\nPerson.prototype.eyes = 2;\nPerson.prototype.nose = 1;\n\nvar kim  = new Person();\nvar park = new Person():\n\nconsole.log(kim.eyes); // => 2\n...
\n
\n

Person.prototype이라는 빈 Object가 어딘가에 존재하고, Person 함수로부터 생성된 객체(kim, park)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있다.

\n
\n

\n

\n

Prototype Link와 Prototype Object

\n

자바스크립트에는 Prototype Link 와 Prototype Object라는 것이 존재한다. 그리고, 이 둘을 통틀어 Prototype이라고 부른다.

\n

\n

\n

Prototype Object

\n

함수가 정의될 때는 2가지 일이 동시에 이루어진다.

\n

\n

1.해당 함수에 Constructor(생성자) 자격 부여

\n
\n

.constructor가 의미하는 것이 무엇일까?

\n\n
\n

Constructor 자격이 부여되면 new연산자를 통해 객체를 만들어 낼 수 있게 된다. 이것이 함수만 new 연산자를 사용할 수 있는 이유이다. constructor가 아니면 new 연산자를 사용할 수 없다.

\n\"\"\n

\n

2.해당 함수의 Prototype Object 생성 및 연결

\n

함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성이 된다.

\n

\"img\"

\n

함수를 정의하면 위와 같이 된다. 그리고 생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있습니다. Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 __proto__를 가지고 있다.

\n

\n

\n\"스크린샷\n

prototype 속성으로 Prototype Object에 접근

\n

constructor는 Prototype Object와 같이 생성되었던 함수를 가리키고 있다.\n__proto__는 Prototype Link다.

\n

\n

\n
function Person() {};\n\nPerson.prototype.eyes = 2;\nPerson.prototype.nose = 1;\n\nvar kim  = new Person();\nvar park = new Person():\n\nconsole.log(kim.eyes); // => 2\n...
\n

왜 Person.prototype을 사용하는지 눈에 보이는가?

\n\"\"\n

Person.prototype 객체에 eyes와 nose 속성이 추가되었다.

\n

Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/삭제 할 수 있다. kim과 park은 Person 함수를 통해 생성되었으니 Person.prototype을 참조할 수 있게 된다.

\n

\n

\n

prototype Link

\n

“kim 객체는 eyes가 없는데 ??”

\n

“kim에는 eyes라는 속성이 없는데도 kim.eyes를 실행하면 2라는 값을 참조하는 것을 볼 수 있다. Prototype Object에 존재하는 eyes 속성을 참조한 것인데요, 이게 어떻게 가능한걸까??”

\n

바로 kim이 가지고 있는 딱 하나의 속성 __proto__가 그것을 가능하게 해주는 열쇠다.

\n

prototype 속성은 함수만 가지고 있던 것과는 달리(Person.prototype 기억나시죠?)\n__proto__속성은 모든 객체가 빠짐없이 가지고 있는 속성입니다.

\n

__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다. kim객체는 Person함수로부터 생성되었으니 Person 함수의 Prototype Object를 가리키고 있는 것이다.

\n\"\"\n

__proto__를 들여다보니 Person 함수의 Prototype Object를 가리키고 있었다.

\n

\n

\n

\"img\"

\n

kim객체가 eyes를 직접 가지고 있지 않기 때문에 eyes 속성을 찾을 때 까지 상위 프로토타입을 탐색한다. 최상위인 Object의 Prototype Object까지 도달했는데도 못찾았을 경우 undefined를 리턴한다.

\n

\n

\n

\"img\"

\n

이런 프로토타입 체인 구조 때문에 모든 객체는 Object의 자식이라고 불리고, Object Prototype Object에 있는 모든 속성을 사용할 수 있다.

\n\"\"\n

Object속성인 toString함수를 kim도 사용가능

\n

\n

\n

__proto__라는 prototype 에 대한 link는 상위에서 물려받은 객체의 프로토타입에 대한 정보이며 Prototype Object는 자신을 원형으로 만들어질 새로운 객체들 즉 하위로 물려줄 연결에 대한 속성이다.

\n

\n

\n

4.1 객체 자신이 소유하고 있는 결과만 나오게 하려면 어떻게 수정해야할까?

\n
Object.prototype.keys = function() {\n    return Object.keys(this);\n}\n\nconst obj = { \"name\" : \"codesquad\", \"class\" : \"webfrontend\"}\n\nfor( key in obj) {\n    console.log(`my value is ${obj[key]}`);\n}
\n
\n

무슨 결과가 나올까?

\n
\n
Object.prototype.keys = function() {\n    return Object.keys(this);\n}\n\nconst obj = { \"name\" : \"codesquad\", \"class\" : \"webfrontend\"}\n\nfor( key in obj) {\n    //???여기에 무엇을 추가해야할까?\n    console.log(`my value is ${obj[key]}`);\n}\n\n//my value is codesquad\n//my value is webfrontend\n//my value is function() {\n//    return Object.keys(this);\n//}
\n
\n

왜 이렇게 나올까?

\n

자바스크립트 엔진이 판단 한 것. 체인으로 연결되어있기 때문에 내가 추가한 최상위 메소드까지 노출 시킨 것.

\n
\n

\n

\n

답.

\n
Object.prototype.keys = function() {\n    return Object.keys(this);\n}\n\nconst obj = { \"name\" : \"codesquad\", \"class\" : \"webfrontend\"}\n\nfor( key in obj) {\n    if(obj.hasOwnProperty(key)){\n    \tconsole.log(`my value is ${obj[key]}`);\n    }\n}\n\n//my value is codesquad\n//my value is webfrontend
\n

hasOwnProperty() => 자기 자신의 프로퍼티를 가지고 있냐

\n

\n

\n

요약

\n

생성자 함수가 있을 때, new 연산자를 써서 instance를 만들면 생성자 함수의 prototype이라고 하는 property가 instance에 __proto__ 라는 property에 전달된다. 즉, 생성자 함수의 prototype과 instance에 proto라고 하는 property는 같은 객체를 참조한다.

\n

\n
\n

참고 및 참조

\n

[Javascript ] 프로토타입 이해하기

\n

Object prototype 이해하기

\n
","frontmatter":{"title":"Prototype","date":"June 03, 2020"}}},"pageContext":{"slug":"/JavaScript/Prototype/","previous":{"fields":{"slug":"/Angular/popstate이벤트를_통해_iframe의_뒤로가기_제어하기/"},"frontmatter":{"title":"popstate이벤트를 통해 iframe의 뒤로가기 제어하기","category":"Angular","draft":false}},"next":{"fields":{"slug":"/JavaScript/Data_Types/"},"frontmatter":{"title":"Data Types","category":"JavaScript","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}