자바스크립트 입문_constructor 프로퍼티

자바스크립트 2021. 5. 19. 14:00

(본 포스팅은 위키북스의 '코어자바스크립트' 책을 공부하면서 작성되었습니다_내돈내산)

 

  • 생성자 함수의 프로퍼티인 prototype객체 내부에는 constructor 라는 프로퍼티가 있음.(당연히 인스턴스의 __proto__ 개체 내부에도 있음)
  • 원래의 생성자 함수 (자기자신)을 참조함. 인스턴스로부터 그 인스턴스의 원형이 뭔지 알 수 있는 수단이 됨.
var arr = [1,2];
Array.prototype.constuctor === Array	// true
arr.__proto__.consructor === Array	// true
arr.constructor === Array 		// true

var arr2 = new arr.constructor(3, 4);
console.log(arr2);			// [3, 4]
  • 위의 코드에서 알 수 있듯이 __proto__가 생성자 함수의 prototype프로퍼티를 참조하며, __proto__는 생략가능하기 때문에 인스턴스(arr)에서 constructor로 직접 접근할 수 있는 수단이 생김.

  • constuctor의 경우 읽기전용 속성이 부여된 예외적인 경우 (기본 리터럴 변수 - number, string, boolean)를 제외하고는 값을 바꿀 수 있음.
let NewConstructor = function() {
  console.log('this is new constructor!');
};
let dataTypes = [
  1, // Number & false
  'test', // String & false
  true, // Boolean & false
  {}, // NewConstructor & false
  [], // NewConstructor & false
  function () {}, // NewConstructor & false
  /test/, // NewConstructor & false
  new Number(), // NewConstructor & false
  new String(), // NewConstructor & false
  new Boolean, // NewConstructor & false
  new Object(), // NewConstructor & false
  new Array(), // NewConstructor & false
  new Function(), // NewConstructor & false
  new RegExp(), // NewConstructor & false
  new Date(), // NewConstructor & false
  new Error() // NewConstructor & false
];

dataTypes.forEach(function(d) {
  d.constructor = NewConstructor;
  console.log(d.constructor.name, '&', d instanceof NewConstructor);
});
  • 모든 데이터가 d instanceof NewConstructor 명령에 대해 false 값을 반환함.
     >> constructor 를 변경하더라도 참조하는 대상만 변경되고, 이미 만들어진 인스턴스의 원형이 바뀌거나 데이터타입이 바뀌지 않음을 알 수 있음.

< 다양한 constructor 접근 방법 >

var Person = function (name) {
  this.name = name;
};

var p1 = new Person('사람1');				// 일반적인 생성자 함수 이용
var p1proto = Object.getPrototypeOf(p1);		// 생성된 인스턴스의 프로토타입을 가져옴
var p2 = new Person.prototype.constructor('사람2'); 	// constructor를 직접호출해서 변수할당
var p3 = new p1proto.constructor('사람3'); 		// 바로 인스턴스의 constructor에 접근
var p4 = new p1.__proto__.constructor('사람4');		// __proto__이용하여 constructor에 접근
var p5 = new p1.constructor('사람5');			// 바로 인스턴스의 constructor에 접근

[p1, p2, p3, p4, p5].forEach(function(p) {
  console.log(p, p instanceof Person);
});
admin