프로토타입
prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 그러면 __proto__를 통해 이 메서드들에 접근할 수 있게 됩니다
=prototype이 만든 인스턴스를 __proto__를 이용해 참조할 수 있다(둘은 같은 객체를 바라본다)
Person.prototype === suzi.__proto__
단 suzi.__proto__.getName 은 undefined가 나오는데 이는 suzi.__proto__라는 객체가 getName의 this가 되었기 때문이다
식별자가 정의되어 있지 않을 때는 undefined를 반환한다는 규칙 때문에 undefined가 반환된다
__proto__는 생략 가는한 프로퍼티이다
" new 연산자로 constructor를 호출하면 instance가 만들어지는데 이 instance의 생략 가능한 __proto__는 constructor의 prototype을 참조한다! "
__proto__는 생략 가능하기 때문에 생성자 함수 prototype에 메서드나 프로퍼티가 있다면 인스턴스에서도 접근할 수 있게 된다
constructor 프로퍼티
생성자 함수의 프로퍼티인 prototype 객체 내부에는 constrctor라는 프로퍼티가 있다
이 프로퍼티는 원래의 생성자 함수(자기 자신)을 참조한다
<프로토타입 체인>
var Person = function (name) {
this.name = name;
};
Person.prototype.getName = function () {
return this.name;
};
var iu = new Person('지금');
iu.getName = function() {
return '바로' + this.name;
};
console.log(iu.getName());
프로토타입에 정의된 getName이 있어도,
객체 자체에 정의된 메서드가 더 우선해서 실행된다
-> 메서드 오버라이딩
console.log(iu.__proto__.getName()); 하면
undefined, prototype에 있는 메서드에 접근할 수 있다
다만 이러면 this가 prototype을 바라보고 있는데 이걸 인스턴스를 바라보도록 한다면
call이나 apply를 쓰면 된다
프로토타입 체인: __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것
프로토타입 체이닝: 이 체인을 따라가며 검색하는 것
프로토타입 체이닝은 메서드 오버라이드와 동일한 맥락이다
어떤 메서드를 검색해서 원하는 게 없으면 __proto__를 검색해서 실행하고 또 없으면 또 검색
객체 전용 메서드의 예외사항
prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재하게 된다
따라서 프로토타입 체이닝을 통해 접근할 수 있는 것들은 오류 없이 결과를 반환하게 되는 문제도 있다(물론 어떤 때는 문제가 아니기도 함)
-> toString 같은 것은 모든 변수가 마치 자신의 메서드인 것처럼 호출할 수 있다
~다중 프로토타입 체인~
대각선의 __proto__를 연결해나가기만 하면 무한대로 체인 관계를 이어나갈 수 있다
~그 방법은, 생성자 함수의 prototype이 연결하고자 하는 상위 생성자 함수의 인스턴스를 바라보게끔해주면 된다~
<정리>
1. 어떤 생성자 함수를 new 연산자와 함께 호출한다
2. Constructor에서 정의된 내용으로 새로운 인스턴스가 생성됨
3. __proto__라는 constructor의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여된다
4. __proto__는 생략 가능하고, constructor.prototype의 메서드를 자신의 메서드인 것처럼 호출할 수 있다
- constructor.prototype에는 constructor라는 프로퍼티가 있는데 이는 생성자 함수 자신을 가리킨다. 자신의 생성자 함수가 뭔지를 찾을 때 쓴다
- __proto__안에 다시 __proto__를 찾아가는 과정을 프로토타입 체이닝이라한다
프로토타입 체이닝을 통해 프로토타입 메서드를 자신의 것처럼 호출할 수 있다
Object.prototype에는 범용적 메서드만이 존재하고, 객체 전용 메서드는 Object 생성자 함수에 스태틱하게 담겨있다
'교재 > 코어 자바스크립트' 카테고리의 다른 글
코어 자바스크립트 헷갈리는 부분 정리 (0) | 2025.04.29 |
---|---|
코어 자바스크립트 | 챕터 7: 클래스 (0) | 2025.04.26 |
코어 자바스크립트 | 챕터 5: 클로저 (1) | 2025.04.25 |
코어 자바스크립트 | 챕터 4: 콜백 함수 (0) | 2025.04.24 |
코어 자바스크립트 | 챕터 3: this (0) | 2025.04.24 |