프로토타입의 정의
var instance = new Constructor();

- prototype은 객체이며, prototype을 참조하는 __proto__ 도 객체이다.
- prototype 이라는 프로퍼티와 __proto__ 라는 프로퍼티와의 관계가 프로토타입의 핵심 개념이다.
- 생성자함수의 prototype에 어떤 메서드나 프로퍼티가 있다면, 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 된다.
- "new 연산자로 constructor를 호출하면 instance가 만들어지는데, 이 instance 의 생략 가능한 프로퍼티인 __proto__ 는
Constructor의 prototype을 참조한다" - __proto__ 의 경우, 생략 가능하며 실무에서는 잘 사용하지 않는다. 대신 Object.getPrototypeOf() , Object.create() 등을 이용하도록 합시다.
프로토 타입과 인스턴스 사이의 관계

Array를 new 연산자와 함께 호출해서 인스턴스를 생성하면, [1,2] 가 만들어집니다.
이 인스턴스의 __proto__은 Array.prototype 을 참조하는데, __proto__가 생략가능하도록 설계돼 있기 때문에 인스턴스가 push, pop, forEach 등의 메서드를 자신의 것처럼 호출할 수 있습니다.
한편 Array의 prototype 내부에 있지 않는 from, isArray 등의 메서드들은 인스턴스가 직접 호출할 수 없습니다.
이들은 Array 생성자 함수에서 직접 접근해야 실행이 가능합니다.
var arr = [1,2];
arr.isArray(); // 사용 불가
Array.isArray(arr); // 사용 가능
Constructor 프로퍼티
생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor 라는 프로퍼티가 있습니다.
인스턴스의 __proto__ 객체 내부에도 마찬가지입니다.
constructor 프로퍼티는 원래의 생성자 함수(자기 자신)을 참조합니다. 이 프로퍼티는 일반적으로는 값을 바꿀 수 있습니다.
constructor 프로퍼티 변경을 못 하는 경우 : number , string, boolean (기본형 리터럴 변수)
var NewConstructor = function () {
console.log("newConstructor");
}
var dataTypes = [
'test' , // String & false
new Array() // NewConstructor & false
];
dataTypes.forEach(function (d) {
d.constructor = NewConstructor;
console.log(d,constructor.name , '&' , d instanceof NewConstructor);
});
모든 데어터가 d instanceof NewConstructor 결과값을 false 로 반환한다.
즉,
constructor를 변경하더라도 참조하는 대상이 변경될 뿐 이미 만들어진 인스턴스의 원형이 바뀌진 않는다는 것을 알 수 있습니다.
그러므로, 어떤 인스턴스의 생성자 정보를 알아내기 위해 constructor를 이용할 수는 있지만, 인스턴스의 원형을 알기위해 constructor를 이용한다는 것은 안전한 방법은 아닙니다.
메서드 오버라이드
정의 : 원본을 제거하고, 다른 대상으로 교체하는 것이 아니라 원본이 그대로 있는 상태에서 다른 대상을 그 위에 얹는 것
자바스크립트엔진이 getName 이라는 메서드를 찾는 방식은 가장 가까운 대상인 자신의 프로퍼티를 검색하고, 없으면 그다음으로 가까운 대상인 __proto__를 검색하는 순서로 진행된다.
프로토타입 체인
배열 리터럴의 __proto__ 에는 __proto__ 와 동일한 내용으로 또다시 __proto__ 가 등장합니다.
prototype 객체가 "Object" 이기 때문입니다. 기본적으로 모든 객체의 __proto__ 에는 Object.prototype이 연결됩니다.
어떤 데이터의 __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인 이라고 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝 이라고 합니다.
'자바 스크립트' 카테고리의 다른 글
[코어 자바스크립트 스터디] 7주차. 클래스 (0) | 2022.01.06 |
---|---|
[코어 자바스크립트 스터디] 5주차. 클로저 (2) | 2021.12.16 |
[코어 자바스크립트 스터디] 1주차. 데이터 타입 (0) | 2021.12.03 |