1. 생성자 패턴 (Consturctor Pattern)

class 를 이용한 생성

class NewPerson {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
      console.log(`${this.name} is ${this.age} years old`);
    }
  }
}

const person1 = new NewPerson('chan', 31);
const person2 = new NewPerson('pptroll', 33);
person1.say(); // chan is 31 years old
person2.say(); // pptroll is 33 years old

2. 팩토리 패턴 (Factory Pattern)

클래스가 객체를 생성 (class 안에 new)

class Person {
  constructor() {}
  
  make (type) {
    switch (type) {
        case 'house':
          return new House();
        case 'car':
          return new Car();
        default:
          return false;
    }
  }
}

class House {
  constructor() {}
  
  say () {
    console.log('House');
  }
}

class Car {
  constructor() {}
  
  say () {
    console.log('Car');
  }
}

const person = new Person();

const house = person.make('house');
const car = person.make('car');

house.say(); // House
car.say(); // Car

3. 프로토타입 패턴 (Prototype Pattern)

템플릿 기반으로 새로운 객체를 생성 (Object의 create()를 이용해 구현)

class Car {
  constructor (_wheels) {
    this.noOfWheels = _wheels;
  }
  
  start() {
    return `start ${this.noOfWheels}`;
  }
  
  stop() {
    return `stop ${this.noOfWheels}`;
  }
}

const car = new Car(4);

const cloneCar1 = Object.create(car, { owner: { value: 'chan' } });
const cloneCar2 = Object.create(car, { owner: { value: 'pptroll' }});

console.log(cloneCar1.__proto__ === car); // true
console.log(cloneCar2.__proto__ === car); // true

cloneCar2.noOfWheels += 10;

console.log(cloneCar1.start()); // start 4
console.log(cloneCar1.stop()); // stop 4
console.log(cloneCar1.noOfWheels); // 4
console.log(cloneCar1.owner); // chan

console.log(cloneCar2.start()); // start 14
console.log(cloneCar2.stop()); // stop 14
console.log(cloneCar2.noOfWheels); // 14
console.log(cloneCar2.owner); // pptroll

4. 싱글톤 패턴 (Singleton Pattern)

하나의 객체만 생성하는 목적으로 사용
ex) 디비 커넥션처럼 한 시스템에서 매번 커넥션을 연결할 필요가 없을 때

class Car {
  constructor (_wheels) {
    this.wheels = _wheels;
  }
  
  setWheels(_n) {
    this.wheels = _n;
  }
}

const Singleton = {
  instance: null,
  
  getInstance(_param1) {
    if(!this.instance)
      this.instance = new Car(_param1);
    
    return this.instance;
  }
}

let car = Singleton.getInstance(4);
let car2 = Singleton.getInstance(3);
let car3 = Singleton.getInstance(2);

console.log(car.wheels, car2.wheels, car3.wheels); // 4 4 4
car2.setWheels(10);
console.log(car.wheels, car2.wheels, car3.wheels); // 10 10 10

5. 빌더 패턴 (Builder Pattern)

체이닝 형태를 유지하여 확장성 있는 객체를 생성 (this 반환)

class Request {
  constructor() {
    this.url = '';
    this.method = '';
    this.data = null;
  }
}

class RequestBuilder {
  constructor() {
    this.request = new Request();
  }
  
  forUrl(url) {
    this.request.url = url;
    return this;
  }
  
  useMethod(method) {
    this.request.method = method;
    return this;
  }
  
  setData(data) {
    this.request.data = data;
    return this;
  }
  
  build() {
    return this.request;
  }
}

let getRequest = new RequestBuilder()
  .forUrl('https://www.naver.com')
  .useMethod('GET')
  .build();

let postRequest = new RequestBuilder()
  .forUrl('https://www.naver.com')
  .useMethod('POST')
  .setData({ id: 'pptroll' })
  .build();

console.log(getRequest); 
// { "url": "https://www.naver.com", "method": "GET", "data": null }
console.log(postRequest); 
// { "url": "https://www.naver.com", "method": "POST", "data": { "id": "pptroll" } }

출처: http://blog.naver.com/PostView.nhn?blogId=pjt3591oo&logNo=222351379222&parentCategoryNo=&categoryNo=11&viewDate=&isShowPopularPosts=true&from=search

profile
pptrollDev@gmail.com

0개의 댓글