모던 자바스크립트 입문 : 9. 객체

 

 

4장 객체의 기초 내용을 바탕으로 객체의 정의와 이용 방법을 자세하게 다룹니다. 프로토타입 상속, 접근자 프로퍼티, 객체의 속성, 프로퍼티의 속성 등에 대해서 입니다. JS 언어의 스펙은 객체로 규정되어 있으므로 객체의 매커니즘에 관한 이해는 JS 전체를 이해하는 기초입니다.

 

 

1. 객체 생성하기

---

객체를 정의하는 방법과, 생성자의 프로토타입 객체에 추가한 메서드를 생성자로 생성한 인스턴스에서 사용하는 방법을 정리합니다. 

 

1.1 객체의 생성

JS 객체는 이름-값을 한 쌍으로 묶은 집합입니다. 이름(key)과 값이 한 쌍을 이룬 것을 프로퍼티라고 합니다. 값에는 모든 데이터 타입의 데이터(원시 값, 객체)를 저장할 수 있습니다. 함수의 참조를 값으로 가진 프로퍼티는 메서드라고 합니다.

 

생성 방법

1) 객체 리터럴로 생성

var card = {suit: "하트", rank: "A"};

 

2) 생성자로 생성

function Card(suit, rank){
	this.suit = suit;
	this.rank = rank;
}
var card = new Card("하트", "A");

 

3) Object.create로 생성 

var card = Object.create(Object.prototype, {
	suit: {
		value: "하트",
		writable: true,
		enumerable: true,
		configurable: true
	},
	rank: {
		value: "A",
		writable: true,
		enumerable: true,
		configurable: true
	}
});

 

 

 

1.2 프로토타입

생성자 안에서 메서드를 정의하는 방식의 문제점

생성자 안에서 this 뒤에 메서드를 정의하면 그 생성자로 생성한 모든 인스턴스에 똑같은 메서드가 추가됩니다.
즉 메서드를 포함한 생성자로 인스턴스를 여러 개 생성하면 같은 작업을 하는 메서드를 인스턴스 개수만큼 생성하게 되며 결과적으로 그만큼의 메모리를 소비합니다.

 

function Circle(center, radius) {
	this.center = center;
	this.radius = radius;
	this.area = function(){
		return Math.PI*this.radius*this.radius;
	};
}
var c1 = new Circle({x:0, y:0}, 2.0);
var c2 = new Circle({x:0, y:1}, 3.0);
var c3 = new Circle({x:1, y:0}, 1.0);

 

 

프로토타입 객체

위의 문제는 프로토타입 객체에 메서드를 정의하는 방식으로 해결할 수 있습니다. JS에서 함수도 객체이므로 함수 객체가 기본적으로 prototype 프로퍼티를 갖고 있습니다. 함수의 prototype 프로퍼티가 가리키는 객체를 그 함수의 프로토타입 객체라고 합니다. prototype 프로퍼티는 기본적으로 빈 객체를 가리킵니다.

 

function F(){};
console.log(F.prototype); //Object{}

 

프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용할 수 있습니다.

 

F.prototype.prop = "prototype value";
var obj = new F();
console.log(obj.prop); //"prototype value"

 

프로토타입은 '원형'이라는 뜻이지만, 여기서는 인스턴스에 아무것도 정의하지 않아도 처음부터 사용할 수 있는 것의 의미로 사용합니다. 또한 프로토타입 객체의 프로퍼티는 읽기만 가능하고 수정이 불가능합니다.
인스턴스의 프로퍼티에 값을 대입했을 때 이름이 같은 프로퍼티가 있으면 그 프로퍼티에 값을 대입하고, 없을 시 인스턴스에 그 이름으로 프로퍼티를 추가한 후 값을 대입합니다.

 

obj.prop = "instance value";
console.log(obj.prop); //"instance value"
console.log(F.prototype.prop); // "prototype value"

프로토

 

// Circle 생성자
fucntion Circle(center, radius) {
	this.center = center;
	this.radius = radius;
}
// Circle 생성자의 프로토타입 프로퍼티에 area 메서드 추가
Circle.prototype.area = funciton(){
	return Math.PI*this.radius*this.radius;
};
// Circle 생성자로 인스턴스를 생성
var c1 = new Circle({x:0, y:0}, 2.0);
var c2 = new Circle();
var c3 = new Circle();
console.log();