[Javascript] 자바스크립트 생성자 함수(Object.prototype.constructor)

모든 객체는 자신의 prototype으로부터 constructor 속성을 상속하게 됩니다.

var obj = {};
obj.constructor === Object; // true

var obj = new Object;
obj.constructor === Object; // true

var array = [];
array.constructor === Array; // true

var array = new Array;
array.constructor === Array; // true

var n = new Number(3);
n.constructor === Number; // true

---

객체의 생성자 표시

다음은 프로토타입이 Tree인 그 형의 객체 thrTree를 만듭니다. 그 다음 객체 theTree의 constructor를 표시합니다.

function Tree(name) {
  this.name = name;
}

var theTree = new Tree('Redwood');
console.log('theTree.constructor is ' + theTree.constructor);

이를 그대로 복사하여 브라우저의 개발자모드의 콘솔탭에서 붙여넣어주어 실행하게되면

 

결과

theTree.constructor is function Tree(name) {
  this.name = name;
}

위의 함수와 같은 문자열을 리턴합니다. 즉 constructor 속성은 함수를 그대로 가지고 있습니다.

---

생성자 함수 사용하기

객체를 만드는 방법 2단계

1. 생성자 함수를 작성하여 객체를 정의.

2. new 키워드를 사용하여 객체의 인스턴스 생성

 

객체를 정의하기 위해 객체의 이름, 속성, 메소드를 지정하는 함수를 만들어줍니다. 예컨데 자동차를 나타내기 위한 객체를 만들고 싶다고해서 이 객체를 car라고 부를 것이고, make, model, year라는 속성을 정의합니다. 

function car(make, model, year) {
   this.make = make;
   this.model = model;
   this.year = year;
}

어찌보면 Java에서 정의하는 생성자와 비슷한 모습입니다.

함수의 인자로 전달받은 값을 객체의 속성에 할당하기 위해 this 키워드를 사용했다는 것에 주목해야합니다.

 

다음으로 이제 mycar라는 객체를 만들고 싶다면

mycar = new car("붕붕이", "소나타", 2018);

다음과 같이 Java에서 많이 보던 방식으로 인스턴스를 생성할 수 있습니다.

마찬가지로 new 키워드를 통해서 몇가지 더 정의하여 인스턴스화 할 수 있습니다.

 

객체의 속성은 원시타입 뿐만아니라 객체타입을 가질 수도 있습니다.

예를 들어, 차가 주인을 가지고 있다는 설정을 할 때,

 

사람(주인)이라는 객체를 정의하는 생성자 함수를 정의해줍니다.

function person(name, age, sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
}
var black = new person("코딩하는흑구", 29, "M");
var yellow = new person("코딩하는누렁이", 31, "M");

그리고 아직 정의되지 않은 car의 owner 속성을 추가하여 수정합니다.

 

function car(make, model, year, owner) {
   this.make = make;
   this.model = model;
   this.year = year;
   this.owner = owner;
}
car1 = new car("현대", "붕붕1호", 2018, black);
car2 = new car("삼성", "붕붕2호", 2019, yellow);

이제 car1의 주인(owner 속성)을 알고싶다면 다음과 같이 접근할 수 있습니다.

car2.owner.name

 

사실 자바스크립트는 동적으로 속성 추가가 가능합니다. 따라서 function car의 재정의를 하지 않고도 만약 mycar 인스턴스에 owner 속성을 추가하고 싶다면

 

mycar.owner = black;

이런식으로 동적으로 추가해주어도 무방합니다.