[자바스크립트] 함수의 prototype 프로퍼티
글 작성자: 망고좋아
반응형
함수의 prototype 프로퍼티
let animal = {
eats: true
};
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype = animal;
let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
alert( rabbit.eats ); // true
Rabbit.prototype = animal
은 "new Rabbit
을 호출해 만든 새로운 객체의[[Prototype]]
을animal
로 설정하라."라는 것을 의미한다.
- 가로 화살표는 일반 프로퍼티인
"prototype"
을, 세로 화살표는[[Prototype]]
을 나타낸다. - 세로 화살표는
rabbit
이animal
을 상속받았다는 것을 의미한다.
Object.prototype.constructor
- 인스턴스의 프로토타입을 만든 Object 함수를 참조를 반환한다.
- 이 속성 값은 함수 자체의 참조이다.
- 함수 이름을 포함하는 문자열이 아니라. 그 값은
1
,true
및"test"
와 같은 원시(primitive) 값에 대해서만 읽기 전용이다. - 모든 객체는 자신의
prototype
으로부터constructor
속성을 상속한다.
const o = {};
o.constructor === Object; // true
const o = new Object;
o.constructor === Object; // true
const a = [];
a.constructor === Array; // true
const a = new Array;
a.constructor === Array; // true
const n = new Number(3);
n.constructor === Number; // true
함수의 prototype 프로퍼티와 constructor 프로퍼티
- 모든 함수는
"prototype"
프로퍼티를 갖는다. - 기본 프로퍼티인
"prototype"
은constructor
프로퍼티 하나만 있는 객체를 가리키는데, 이constructor
프로퍼티는 함수 자신을 가리킨다.
function Rabbit() {}
// 기본 prototype:
// Rabbit.prototype = { constructor: Rabbit }
alert( Rabbit.prototype.constructor == Rabbit ); // true
- 특별한 조작을 가하지 않았다면
Rabbit
을 구현한 객체 모두에서[[Prototype]]
을 거쳐constructor
프로퍼티를 사용할 수 있다.
function Rabbit() {}
// 기본 prototype:
// Rabbit.prototype = { constructor: Rabbit }
let rabbit = new Rabbit(); // {constructor: Rabbit}을 상속받음
alert(rabbit.constructor == Rabbit); // true (프로토타입을 거쳐 접근함)
constructor 프로퍼티를 사용하면 기존에 있던 객체의 constructor를 사용해 새로운 객체를 만들 수 있다.
function Rabbit(name) {
this.name = name;
alert(name);
}
let rabbit = new Rabbit("White Rabbit");
let rabbit2 = new rabbit.constructor("Black Rabbit");
// 출력
// White Rabbit
// Black Rabbit
⚠️자바스크립트는 알맞은 constructor
값을 보장하지 않는다.
- 함수에 기본으로
prototype
값이 설정되긴 하지만 그게 전부이다. constructor
에 벌어지는 모든 일은 전적으로 개발자에게 달려있다.
📌 참고
- 모던 JavaScript 튜토리얼
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
[JavaScript] Object.assign() 사용법 (0) | 2021.09.11 |
---|---|
[자바스크립트] Location 객체 (0) | 2021.08.11 |
[자바스크립트] 프로토타입 상속 (0) | 2021.07.16 |
[자바스크립트] getter와 setter (0) | 2021.07.15 |
[자바스크립트] 다시 보는 화살표 함수 (0) | 2021.07.15 |
댓글
이 글 공유하기
다른 글
-
[JavaScript] Object.assign() 사용법
[JavaScript] Object.assign() 사용법
2021.09.11 -
[자바스크립트] Location 객체
[자바스크립트] Location 객체
2021.08.11 -
[자바스크립트] 프로토타입 상속
[자바스크립트] 프로토타입 상속
2021.07.16 -
[자바스크립트] getter와 setter
[자바스크립트] getter와 setter
2021.07.15