프로토타입

프로토타입 객체

프로토타입은 객체지향의 핵심인 상속을 구현하기 위해 사용됩니다

프로토타입은 부모객체의 역할을 하는 객체로 다른 객체에 공유 프로퍼티를 제공합니다

프로퍼티를 상속받은 하위객체는 부모객체의 프로퍼티를 자유롭게 사용 할 수 있습니다

 

모든 객체는 [[Prototype]] 이라는 내부 슬롯이 있으며 [[Prototype]] 에 저장되는 프로토 타입은 객체 생성 방식에 의해 결정됩니다

 

__proto__ 접근자 프로퍼티

모든 객체는 __proto__ 접근자 프로퍼티를 사용하여 [[Prototype]]  내부에 간접적으로 접근이 가능합니다

const obj = {};
const parent = { num: 7 };
 
obj.__proto__ = parent;
 
console.log(obj.num);   // 7

 

__proto__ 접근자 프로퍼티를 사용하여 [[Prototype]]  내부에 간접적으로 접근이 가능하지만 권장하지 않는 방법입니다

__proto__  대신

프로토타입의 참조를 불러오고 싶은경우 Object.getPrototypeOf();

프로토타입을 변경하고 싶은 경우 Object.getPrototypeOf(obj)

을 권장합니다

 

const obj = {};
const person = { name: 'lee' };
 
// obj 객체의 프로토타입을 불러옴
console.log(Object.getPrototypeOf(obj)); // [Object: null prototype] {}
console.log(obj.name);                   // undefined
 
// obj 객체의 프로토타입을 person으로 교체
Object.setPrototypeOf(obj, person);
 
// 교체된 obj 객체의 프로토타입을 불러옴
console.log(Object.getPrototypeOf(obj)); // { name: 'lee' }
console.log(obj.name);                   // lee

 

함수 객체의 프로토타입 프로퍼티

함수와 클래스 객체만이 prototype 프로퍼티를 가집니다

class IsClass {}
const func = function () {};
const isInstance = new IsClass();
const isObj = { };
 
// 클래스
console.log(IsClass.hasOwnProperty('prototype')); // true
 
// 함수
console.log(func.hasOwnProperty('prototype')); // true
 
// 인스턴스
console.log(isInstance.hasOwnProperty('prototype')); // false
 
// 객체
console.log(isObj.hasOwnProperty('prototype')); // false

 

다만 함수중에 화살표함수와 메서드 축약표현으로 정의한 메서드는 prototype 프로퍼티가 없으며 프로토타입도 생성하지 않습니다

 

 

정리

constructor: 함수 선언문, 함수표현식, 클래스 =  prototype 프로퍼티가 있다.

non-constructor: 메서드, 화살표 함수 = prototype 프로퍼티가 없다.

생성자함수는 생성자함수의 자식에게 prototype를 할당하고

생성자 함수의 자식은 __proto__을 가지며 자식의 __proto__는 부모의 prototype를 가리킵니다

구분	소유	값	사용주체	사용목적
__proto__ 접근자 프로퍼티	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신의 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용