单例模式

最新推荐文章于 2025-06-26 16:22:34 发布

家威Geek

最新推荐文章于 2025-06-26 16:22:34 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： JS设计模式文章标签： javascript

本文链接：https://blog.csdn.net/liujiawei00/article/details/109053703

JS设计模式专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中的单例模式，包括基本实现、代理单例和惰性单例。通过示例展示了如何确保类只创建一个实例并提供全局访问点。此外，还探讨了单例模式在实际场景中的应用，如页面元素创建和iframe管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单例模式只会创建一个实例，且仅有一个实例，并提供一个访问它的全局访问点

理解单例模式

var Singleton=function(name){
   this.name=name;
}

Singleton.prototype.getName=function(){
    console.log(this.name);
}

Singleton.getInstance=(function(){
    var instance=null;
    return function(name){
        if(!instance){
          instance=new Singleton(name);
        }
        return instance;
    }
})()

var a = Singleton.getInstance("aa");
var b = Singleton.getInstance("bbb");
console.log(a===b); //true

代理单例

var CreateDiv=function(html){
    this.html=html;
    this.init();
 }
 
 CreateDiv.prototype.init=function(){
     var div=document.createElement('div');
     div.innerHTML=this.html;
     document.body.appendChild(div);
 }
 
 var ProxySingletonCreateDiv=(function(){
     var instance;
     return function(html){
         if(!instance){
             instance=new CreateDiv(html);
         }
         return instance;
     }
 })()
 
 var a=new ProxySingletonCreateDiv('aa');
 var b=new ProxySingletonCreateDiv('bb');
 console.log(a===b);  //true

惰性单例，需要的时候才创建实例

 var getSingle = function(fn){
     var result;
     return function(){
         return result || (result=fn.apply(this,arguments));
     };
 };
 
 var createSingleIframe=getSingle(function(){
     var iframe=document.createElement('iframe');
     document.body.appendChild(iframe);
     return iframe;
 });
 
 document.getElementById('btn').onclick=function(){
     var createSingleIframe=new createSingleIframe();
     createSingleIframe.src='https:www.baidu.com';
 }