독도갈매기의 개발 블로그
[JS] 자바스크립트가 어려운 이유 Prototype 편 -끝- 본문
이 포스팅은 이어지는 포스팅입니다. 전편을 먼저 읽고 오시는 것을 권장드립니다.
Prototype Object
먼저 저번 코드를 가져오면
let Person = () => {}
let kim = new Person()
저희는 Person
이라는 함수를 만들었고 이때 일어나는 일을 그림을 나타낸다면 ↓
위 그림처럼 저희는 Person
이라는 함수를 하나 정의했지만 실제 JS에서는function Person() {}
하나와 Person Prototype Obejct
하나 총 두개가 만들어지죠
그걸로 끝나는 것이 아닌 Person의 property인 prototype은 Person Prototype Obejct의 constructor를 가르킵니다.
그와 반대로 Person Prototpye의 property인 constructor는 Person을 가르킵니다. prototype(Person) -> constructor(PPO) -> Person
이런 현상을 Person과 Person Prototype Obejct가 상호참조
한다고 합니다.
Prototype Link
코드를 조금 수정했습니다.
let Person = (name) => {
this.name = name;
}
let kim = new Person("김철수");
let hong = new Person("홍길동");
console.log(kim.age);
console.log(hong.age);
저번 글에서 설명했던 것이 Prototype Link가 있기에 이루어질수 있는 개념인것이죠__proto__
이 Person Prototype Obeject를 가르키기에 인스턴스에 없는 property라면 상속받아 사용하는 것입니다
이러한 개념이 Prototype Link의 개념입니다.
어떠셨나요? 처음으로 2편으로 찢어 글을 적었는데 도움이 되는 글이었나요?
도움이 되셨다면 다행이고 잘못된 개념이 있다면 아쉬움이 많이 남는 글이었던 것 같습니다.
이번 글을 작성하면서 몇일동안 고민해가며 글을 적어나갔는데 제 자신에게는 많은 도움이 된 것 같아
뿌듯합니다. 다음에도 잘 정리된 포스팅으로 찾아 뵙겠습니다. 감사합니다.
'Javascript' 카테고리의 다른 글
[JS] 객체지향프로그래밍(OOP)의 핵심 개념 인스턴스와 객체 (0) | 2020.09.29 |
---|---|
[JS] 알아두면 좋은 JS개념 spread와 rest 전개구문 (0) | 2020.09.27 |
[JS] 프레임워크에서 많이 쓰는 JS개념 구조분해할당 (0) | 2020.09.26 |
[JS] 자바스크립트가 어려운 이유 Prototype 편 -1- (0) | 2020.09.12 |
[JS] '=' '==' '===' 의 차이점은? 5초안에 떠오르지 않는다면 들어오세요. (0) | 2020.08.16 |