구글러 오스마니님의 JavaScript Design Pattern 글에서 패턴을 요약해 본다. 생성자 패턴에 대해 알아보자
개념
- 자바스크립트는 모든것이 오브젝트이다
- Object constructor가 지정한 타입의 오브젝트를 생성하는데 사용한다
Object Creation
- 오브젝트를 만드는 3가지 기본 방법
비어있는 오브젝트를 만들어 리턴하는 것이다
var newObject = {};
var newObject = Object.create( null );
var newObject = new Object();
- 오브젝트에 Key, Value 할당하는 4가지 방법
// 1. Dot syntax
newObject.someKey = "hi dowon";
var key = newObject.someKey;
// 2. Square bracket syntax
newObject["someKey"] = "hi youngsik";
var key = newObject["someKey"];
// ECMAScript 5 olny
// 3. Object.defineProperty
Object.defineProperty( newObject, "someKey", {
value: "hi dowon",
writable: true,
enumerable: true,
configurable: true
});
var defineProp = function( obj, key, value ) {
config.value = value;
Object.defineProperty( obj, key, config);
};
var person = Object.create( null );
defineProp( person, "car", "Seoul");
defineProp( person, "house", "apt");
// 4. Object.defineProperties
// set properties
Object.defineProperties( newObject, {
"someKey": {
value: "hi dowon",
writable: true
},
"anotherKey": {
value: "youngsik",
writable: false
}
});
Basic Constructors
- Constructor Function에 new 키워들 사용하여 신규 오브젝트를 생성한다
- Constructor Function안의 this는 새로 생성된 오브젝트의 레퍼런스이다
// define constructor function
function Car(model, price) {
this.model = model;
this.price = price;
this.toString = function() {
return this.model + ', ' + this.price;
}
}
// new로 생성하면 Car.prototype을 통하여 신규 오브젝트를 만들어 주소를 넘겨주면 hd가 주소 레퍼런스를 가진다
var hd = new Car('santafe', 1000);
// 찍어보자
Car {model: "santafe", price: 1000, toString: function}
- Function은 prototype 프로퍼티를 가지고 있다. prototype은 객체를 레퍼런스를 하는데 별도로 지정하지 않으면 자신의 property 객체를 레퍼런스 한다. 여기서 Car.property 는 Car.property 객체를 레퍼런스 한다
function Car(model, price) {
this.model = model;
this.price = price;
}
Car.prototype.toString = function() {
return this.model + ', ' + this.price;
}
console.log(hd.toString());
kia, 5000
Car Constructor Function은 {this.model: <value>, this.price: <value>, prototype: Car.prototype} 가 되고, Car.prototype 객체는 {constructor: Car, toString: function() {...}} 이다. Car Constructor Function의 prototype 프로퍼티는 Car.prototype 객체를 레퍼런싱하고, Car.prototype객체의 constructor 프로퍼티를 통하여 Car Constructor Function을 레퍼런싱하여 상호 참조한다. prototype와 constructor 프로퍼티는 writable이다. 이를 이용해 JavaScript의 Prototypal Inheritance 방식을 사용할 수 있다.
<참조>
'Languages > JavaScript' 카테고리의 다른 글
| [JavaScript] Design Pattern - Singleton Pattern (0) | 2013.09.07 |
|---|---|
| [JavaScript] Design Pattern - Module Pattern (0) | 2013.09.07 |
| [JavaScript] 피해야하는 사용 패턴들 (Anti-Patterns) (0) | 2013.08.30 |
| [JavaScript] 김영보선생님의 객체지향 이야기 (0) | 2013.06.28 |
| [JavaScript] 배우는 방법 (0) | 2013.02.20 |
