책 [코어 자바스크립트]를 기반으로 작성하였습니다.
안녕하세요. 휴먼스케이프 loowin입니다. 😃
오늘은 프로토타입의 개념에 대해 알아 보겠습니다.
자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반 언어에서는 ‘상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻습니다.
프로토타입의 개념 이해
이 그림은 다음장(클래스)까지 반복적으로 등장할 그림입니다.
위 그림은 프로토타입을 표현하는 좋은 그림입니다.
var instance = new Constructor();이를 그림으로 표현하면 다음과 같습니다.
- 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면
- Constructor에서 정의된 내용을 바탕으로 새로운 instance가 생성됩니다.
- 이때 instance에는 __proto__라는 프로퍼티가 자동으로 부여되는데,
- 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조합니다.
prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 그러면 인스턴스에서도 숨겨진 프로퍼티인 __proto__를 통해 이 메서드들에 접근할 수 있게 됩니다.
예를 들어 Person이라는 생성자 함수의 prototype에 getName이라는 메서드를 지정해 보겠습니다.
var Person = function (name) {
this._name = name;
};Person.prototype.getName = function() {
return this._name;
};
이제 Person의 인스턴스는 __proto__ 프로퍼티를 통해 getName을 호출할 수 있습니다.
var loowin = new Person('Loowin');
loowin.__proto__.getName(); //undefinedloowin.getName(); // Loowin
인스턴스의 __proto__가 Constructor의 prototype 프로퍼티를 참조하므로 결국 둘은 같은 객체를 바라보기 때문입니다.
__proto__는 생략 가능한 프로퍼티입니다. 원래부터 생략 가능하도록 정의돼 있고 이를 바탕으로 자바스크립트의 전체 구조가 구성됐다고 해도 과언이 아닙니다. 이유가 어찌됐든 __proto__가 생략 가능하다는 점만 기억하면 됩니다.
__proto__를 생략하지 않으면 this는 suzi.__proto__를 가리키지만, ㅣ를 생략하면 suzi를 가리킵니다. suzi.__proto__에 있는 메서드인 getName을 실행하지만 this는 suzi를 바라보게 할 수 있게 된 것입니다. 그림으로 표현하면 다음과 같습니다.
“new연산자로 Constructor를 호출하면 instance가 만들어지는데, 이 instance의 생략 가능한 프로퍼티인 __proto__는 Constructor의 prototype을 참조한다! “ 여기까지 이해하셨다면 프로토타입을 이해하신 것이나 마찬가지입니다.
var loowin = new Person('Loowin');console.dir(Person);console.dir(loowin);
결론: 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됩니다.
이상 javascript의 prototype에 대해 알아보았습니다. 감사합니다.
[출처]
Get to know us better!
Join our official channels below.
Telegram(EN) : t.me/Humanscape
KakaoTalk(KR) : open.kakao.com/o/gqbUQEM
Website : humanscape.io
Medium : medium.com/humanscape-ico
Facebook : www.facebook.com/humanscape
Twitter : twitter.com/Humanscape_io
Reddit : https://www.reddit.com/r/Humanscape_official
Bitcointalk announcement : https://bit.ly/2rVsP4T
Email : support@humanscape.io
