Singleton&Prototype

Singleton

전체 시스템에서 클래스의 인스턴스를 하나만 존재하도록 하는 패턴이다.

• 객체 리터럴

// object literal
const obj = {
    name: 'singleton',
};

console.log(obj);

하지만 이 객체는 캡슐화가 되어 있지 않아 결합도가 커지며 데이터를 보호(모든 속성이 다 공개 되어 있음)하는데 문제가 생길 수 있다.

• ES5

// ES5
const ES5_Singletion = (function () {
    let instance;

    function setInstance() {
      instance = {
        id: 1,
        text: 'hello',
      };
    }

    return {
        getInstance() {
            if (!instance) {
                setInstance();
            }
            return instance;
        }
    };
})();

const es5Singletion1 = ES5_Singletion.getInstance();
const es5Singletion2 = ES5_Singletion.getInstance();

console.log('Singleton function', es5Singletion1 === es5Singletion2);

즉시 실행함수를 활용해서 instance 와 setInstance 함수를 캡슐화

• ES7

// ES7
let instance;

class Singleton {
  static instance
  constructor(){
    if (instance) return instance;
    this.id = 1;
    this.name = 'hello';
    instance = this;
  }
}

const es6Singleton1 = new Singleton();
const es6Singleton2 = new Singleton();

console.log("singleton class", es6Singleton1 === es6Singleton2);

정적 필드

게임 을 실행 했을 때 게임은 한 번만 켜져야하기 때문에 싱글톤 패턴이 적절하다.

Prototype

프로토타입 패턴은 객체를 생성할때 원본객체를 복사해서 생성하는 방식을 말한다.

JS에선 Class가 아닌 함수로 객체를 생성한다.(ES5)

function A(){
	this.user = "aaa";
};

// new 연산자
var new_a = new A();

// Object.create
var object_a = Object.create(A);

A.prototype.admin = "test";

위의 A함수를 생성자로 호출하면서 생성된 new_a객체는 A.prototype 객체를 원본 객체로하여 복제된 객체이다.

console.log(new_a);
// A { user: 'aaa' }

console.log(new_a.user);
// aaa

console.log(new_a.admin);
// test

console.log(new_a.__proto__);
// { admin: 'test' }

console.log(A.prototype === new_a.__proto__);
// true

A의 prototype 객체와 new_a의 원본 객체가 일치한다.

console.log(object_a);
// A {}

console.log(object_a.user);
// undefined

console.log(object_a.admin);
// test

console.log(object_a.__proto__);
// { admin: 'test' }

console.log(object_a.__proto__ === A.prototype);
// true

• A의 prototype 객체와 object_a의 원본 객체가 일치하지만 new 연산자와는 다르게 A의 user는 받아오지 못하였다.
  • 이는 new 연산자는 Object.create()에 coustructor를 추가해 실행하였기 때문이였다.
  • 그럼에도 Object.create가 생겨난 이유
    • constructor가 있는 prototype을 새로운 객체로 덮어 씌우면 원래 자기 자신의 constructor를 상실하게 된다.
    • 즉, JS내부에서 constructor가 망가지는 것을 원하지 않았기에
    • 하지만 더이상 거의 쓰이지 않는다..