[[Prototype]] 과 프로토타입 객체
출처: 모던 자바스크립트 튜토리얼
- 모든 JS 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖는다!
- [[Prototype]] 이 다른 객체를 참조하고 있을 때 그 참조하는 대상을 프로토타입 객체 라고 한다.
__proto__
- [[Prototype]] 은 직접 접근이 불가능하다. 프로토타입 체인의 단방향성 때문.
- [[Prototype]] 의 getter 이자 setter인 __proto__ 로 접근 가능
- 최근에는 Object.getPrototypeOf / Object.setPrototypeof 를 사용
함수의 prototype 프로퍼티
// 생성자 함수
const Person = function (name, age) {
this.name = name;
this.age = age;
};
const person = new Person('Ham', 24);
console.log(Person.prototype === person.__proto__); // true -- (1)
console.log(Person.prototype.constructor === Person); // true -- (2)
- 모든 JS 함수는 prototype 프로퍼티를 갖는다!
- 단, 화살표 함수에는 prototype 프로퍼티가 없다.
- (1) prototype 프로퍼티는 기본값으로 constructor 하나만 있는 객체(프로토타입 객체)를 가리킨다.
- (2) 그 constructor 는 함수 자신을 가리킨다.
.__proto__ vs .prototype
출처: 모던 자바스크립트 딥다이브
| |
사용 주체 |
참조하는 값 |
사용 목적 |
| .__proto__ |
모든 객체 |
프로토타입 |
객체가 자신의 프로토타입에 접근(get), 교체(set)하기 위해 사용 |
| .prototype |
모든 함수 |
프로토타입 |
생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용 |
리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
// 객체 리터럴
const Person1 = {
name: 'Ham',
age: 24,
};
console.log(Person1.__proto__ === Object.prototype); // true -- (2)
console.log(Person1.__proto__.constructor === Object); // true -- (1)
| |
(1) 생성자 함수 |
(2) 프로토타입 |
| 객체 리터럴 |
Object |
Object.prototype |
| 함수 리터럴 |
Function |
Function.prototype |
| 배열 리터럴 |
Array |
Array.prototype |
| 정규표현식 리터럴 |
RegExp |
RegExp.prototype |
