手写单例模式后，面试官直接和我谈入职

Posted 2022-05-20 前端呆头鹅

前几天小呆去面试，面试官问小呆对设计模式了解多少，小呆现场实现了一个单例模式后，喜提offer，小呆暗暗庆幸，还好面试前有所准备。现把这篇文章推荐给所有人。

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
在js开发中，该模式用途仍然广泛，如我们现有一个登录弹框，该dom元素只在第一次触发时被创建，后续触发返回第一次建立的dom元素即可。

首先我们写一个简单的构造函数，用来构造实例。

var getIntance =  function(name) 
  this.name = name

当我们调用这个构造函数的时候，可以获得一个简单实例。

var a = new getIntance('张三')
console.log(a) //  name: '张三' 

当重复调用这个构造函数时，可以获得多个不同实例。

var a = new getIntance('张三')
var b = new getIntance('李四')
console.log(a, b) //  name: '张三'    name: '李四' 

单例模式的含义是，有些时候，我们只需要一个实例，当再次触发生成实例机制时，如实例已经被触发过，我们就返回第一次生成的实例。

如果该机制实现，调用现象如下：

var a = new getIntance('张三')
var b = new getIntance('李四') // 不再生成实例，返回第一次生成的实例
console.log(a, b) //  name: '张三'    name: '张三' 

如我们现有一个登录弹框，该dom元素只在第一次触发时被创建，后续触发返回第一次建立的dom元素即可。或我们有一个click事件，只需要绑定一次。总之，用法广泛。

回到上文，我们怎样来实现这种效果呢？

我们可以设置一个代理类，专门用来处理单例逻辑：

var proxyGetIntance =  (function() 
  var intance=null
  return function(name)
    if(!intance) 
      intance = new getIntance(name)
    
    return intance
  
)()

var c = new proxyGetIntance(11)
var d = new proxyGetIntance(22)
console.log(c, d) //  name: 11   name: 11 

上面的代码实现了我们的需求，但是，它和getIntance函数相互依赖，我们做一点小更改。

var proxyGetIntance =  function(fn) 
  var intance=null
  return function()
    if(!intance) 
      intance = new fn(...arguments)
    
    return intance
  

var creat = proxyGetIntance(getIntance)

var c = creat(11)
var d = creat(22)
console.log(c, d)

现在，proxyGetIntance单例代理类可以为任意一个构造函数设置单例模式了。