티스토리 뷰


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 값들을 붙여준다.


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




'Front-end > Javascript' 카테고리의 다른 글

Closure  (0) 2017.02.26
javascript prototype inheritance  (0) 2017.02.26
Object creation patterns - factory, constructor, prototype  (0) 2017.02.25
공유하기 링크
TAG
, , , ,
댓글
댓글쓰기 폼
최근에 달린 댓글
글 보관함
«   2019/05   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
Total
295
Today
0
Yesterday
0