Object creation patterns - factory, constructor, prototype

Object creation patterns

▶ 자바스크립트

Javascript는 Java 와 같이 Class 가 존재하지 않는다.

기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다.

자바스크립트의 가장 큰 특징은 유연함(flexibility)이다.

객체를 생성하는데 있어서 여러가지 패턴들을 살펴보겠다.

▶ Factory pattern

function InfoFactory(name, age, job) {

    var person = {};

    person.name = name;
    person.age = age;
    person.job = job;

    person.print = function () {
        console.log('Name: ' + this.name + ', Age: ' + this.age + ', Job: ' + this.job);
    };

    return person;
}

var person1 = new InfoFactory('Jaesung', 32, 'Front-end Engineer');
var person2 = new InfoFactory('Jason', 32, 'Full-stack Engineer');

person1.print();
person2.print();

/* 결과값
Name: Jaesung, Age: 32, Job: Front-end Engineer
Name: Jason, Age: 32, Job: Full-stack Engineer
*/

factory 패턴은 함수 안에 빈 객체를 생성하고 각각의 property를 추가해준다.

마지막으로 객체를 return 해주는 방식이다.

▶ Constructor pattern

function InfoConstructor(name, age, job) {

    this.name = name;
    this.age = age;
    this.job = job;

    this.print = function () {
        console.log('Name: ' + this.name + ', Age: ' + this.age + ', Job: ' + this.job);
    };
}

var person1 = new InfoConstructor('Jaesung', 32, 'Front-end Engineer');
var person2 = new InfoConstructor('Jason', 32, 'Full-stack Engineer');

person1.print();
person2.print();

/* 결과값
Name: Jaesung, Age: 32, Job: Front-end Engineer
Name: Jason, Age: 32, Job: Full-stack Engineer
*/

constructor 패턴은 마치 Java와 같다. InfoFactory 메서드가 class constructor이고 this는 infoFactory 객체를 가리킨다.

인스턴스를 생성한 다음에 InfoFactory 객체의 property 에 접근할 수 있다.

▶ Prototype pattern

function InfoProto() {}

InfoProto.prototype.name = 'no name';
InfoProto.prototype.age = 0;
InfoProto.prototype.job = 'no job';
InfoProto.prototype.print = function () {
    console.log('Name: ' + this.name + ', Age: ' + this.age + ', Job: ' + this.job);
};

var person1 = new InfoProto();
person1.name = 'Jaesung';
person1.age = 32;
person1.job = 'Front-end Engineer';

var person2 = new InfoProto();
person2.name = 'Jason';
person2.age = 32;
person2.job = 'Full-stack Engineer';

person1.print();
person2.print();

/* 결과값
Name: Jaesung, Age: 32, Job: Front-end Engineer
Name: Jason, Age: 32, Job: Full-stack Engineer
*/

prototype 패턴은 factory 및 constructor 패턴과 달리 'prototype' 이라 불리는 공유된 공간에 property와 function을 추가해준다.

그리고나서 새로운 인스턴스를 생성하고 객체에 접근하여 property 값들을 붙여준다.

이 세가지 패턴은 그림 하나로 완성하면 이렇게 표현할 수 있다.