設計模式 Singleton

筆記學習設計模式，程式筆記下來，以後遇到情境時可以使用。
Singleton 好處就是該物件只可以實例化一次，之後再進行呼叫都還是會是同一個實體。
可以在 Bootstrap 的 base-component.js 看到相關寫法

static getOrCreateInstance(element, config = {}) {
  return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
}

特點

• 節省記憶體
• 單一介面
• 情境太複雜時，不建議使用

範例

以下使用 JavaScript 實作 singleton 設計模式。

先來看個記憶體指向不同的範例

var Foo = function () {
  this.name = 'foo'
}

var instance1 = new Foo()
var instance2 = new Foo()
console.log(instance1 === instance2) // false

當然，因為是不同的記憶體位址，所以會是得到 false

var Foo = function () {
  if (typeof Foo.instance === 'object') {
    return Foo.instance
  }

  this.name = 'foo'
  Foo.instance = this
}

var instance1 = new Foo()
var instance2 = new Foo()

console.log(instance1 === instance2) // true

instance1.name = 'bar'

console.log(instance2.name) // bar

從上面的這個範例可以看到，如果我們兩個實例會是同一個記憶體位子。
如果修改了 instance1 的 name instance2 的 name 也會被修改到。

最後修改一個 es6 class 的寫法

class Foo {
  constructor(config) {
    this.name = 'foo'
    this.config = config
  }

  static getInstance(config) {
    if (!this.instance) {
      this.instance = new Foo(config)
    }

    return this.instance
  }
}

var instance1 = Foo.getInstance()
var instance2 = Foo.getInstance()

console.log(instance1 === instance2)