자바스크립트 객체 생성 방법

저번에는 closure 와 내장함수(inner fucntion) 을 알아보았는데, 객체에 대해서 좀 더 알아봐야 할 듯하다. 알면알수록 아리송~

자바스크립트는 놀랍게도 거의 모든 것이 객체로 이루어져 있다. 

기본자료형 역시 null과 undefined 를 제외한 나머지도 객체로 되어 있다. 

객체를 생성하는 방법에는 2가지 경우가 있다. 

1. object initializer 방법

2. constructor function 이용하는 방법

1번은 객체를 직접 { } 안에 property와 value를 정의해서 사용하는 방법을 의미한다.

var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};

이때까지 많이 해왔던 방법이라 패스.

2번은 생성자 함수(constructor function)를 이용해서 객체를 생성하는 방식을 의미한다.

우선 객체의 타입을 정의해야한다. 타입을 정의한다는 의미가 결국 함수를 하나 만드는 것이라고 생각하면 된다.

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

this 키워드는 객체의 property 를 정의하고 값을 할당하기 위해 사용한다.

이제 객체를 생성할 일만 남았다. new 연산자를 이용해서 생성한다.

var mycar = new Car("Eagle", "Talon TSi", 1993);

지금 Car 라는 타입안에는 값(value)들만 정의되어 있지만, 사실 메소드(함수)를 정의할 수도 있다. 하지만 메소드라는 것이 객체마다 다 똑같이 적용되어 있는 것이지 객체마다 다르게 정의되있어야 하는 것은 아니기 때문에  보통은 function 안에 직접 정의 하지 않는다. 보통 prototype 이라는 property 안에 정의를 한다. 한번만 정의해 놓으면 같은 타입의 객체들에 똑같은 값 또는 함수가 적용되기 때문에 더 효율적이다. 

우선 prototype 안에 어떤 타입에 공통적으로 들어갈 데이터나 함수를 정의를 하고 결과를 확인해보자.

var car1 = new Car("Eagle", "Talon TSi", 1993);
var car2 = new Car("Nissan", "300ZX", 1992);

Car.prototype.wheel = 4;
Car.prototype.display = function(){
	return "make : "+this.make+", model : "+this.model+", year : "+this.year;
};


console.log(car1.wheel);		// returns 4
console.log(car1.display());	// returns "make : Eagle, model : Talon TSi, year : 1993"

console.log(car2.wheel);		// returns 4
console.log(car2.display());	// returns "make : Nissan, model : 300ZX, year : 1992"

객체 car1, car2 두개를 생성했다. 하지만 wheel 데이터와 display 함수는 Car 타입의 prototype 안에 한번만 정의해 놓으면 모든 객체에서 접근가능하며 사용할 수 있는 property가 된다. 

여기서 car2 객체에만 wheel 이라는 이름으로 property 를 생성하면 어떻게 될까. 크롬 콘솔창에서 본 모습은 아래와 같다.

car2 객체에만 wheel : 2  값이 들어간 것이고, prototype 안의 wheel : 4 의 값은 또 따로 있는 것이다. 그리고 둘다 이름이 같다면 prototype 안에 있는 wheel 보다 객체에 직접 설정되있는 wheel 값이 우선이 된다. 그러므로 car2.wheel 값이 2로 출력된다.

그러면 원래 prototype 안에 설정되있는 값이 나오게 하려면 어떻게 해야할까. 우선 지금 생각해본거로는 mycar2 만 가지고 있는 wheel 프로퍼티를 삭제하거나 __proto__ 프로퍼티에 접근해서 가져오는 방법이 가능했다.

console.log(car2.__proto__.wheel);	// returns 4

이렇게 하거나 아니면 delete 를 해서 prototype 의 프로퍼티를 읽게만들던가..

delete car2.wheel;
console.log(car2.wheel);	// returns 4

사용자객체에 대해 좀 공부하니 담엔 prototype 쪽에 알아봐야 할듯하다.

(출처 : https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects)