javascript 单例模式详解及简单实例

网络编程 2025/3/2 佚名

3 2 1

JS 单例模式

概要：

单例指一个类只有一个实例，这个类自行创建这个实例。

利用对象字面量直接生成一个单例：

var singleton = {
  prop: 1,
  method: function(){
    console.log(a);  //1
  }
}

严格的说对象字面量可能不算单例模式，生成单例是对象字面量的作用（已经被封装），而单例模式是一个设计模式（需要自行构思或设计）。

在类内部用new生成实例的单例模式：

var instance;
var foo = function(){
  if(!instance){
    instance = new Singleton();
  }
  return instance;
  function Singleton(){
    this.name = 'single';
    this.method = function(){
      console.log(this.name);
    }
  };
}
 
var a = foo();
var b = foo();
a.method();       //single
console.log(a === b);  //true

单例模式只要检测一个实例是否被生成。假如没有实例，则生成实例。假如已经生成则返回这个实例。保证这个类只有这一个实例。

由于hoisting，函数会提前声明，所以 singleton 函数放在哪都没所谓，但是每次调用都会声明函数singleton，可能会不够优雅。

由于new关键字是执行函数，同时this指向这个对象，所以可以判断类的this是否赋值给instance：

var instance;
var Singleton = function(){
  if(instance){
    return instance;
  }
  instance = this;
  this.name = 'single';
  this.method = function(){
    console.log(this.name);
  }
}
 
var a = new Singleton();
var b = new Singleton();
a.method();       //single
console.log(a === b);  //true

这个例子中，把instance指向了Singleton这个类，然后在类外部通过new来实例化，和上例中的new异曲同工。由于是通过修改this来达到检测是否执行过Singleton类，所以个人感觉不够语义化。

上面的例子用es6重构的写法。

类内部new生成单例：

var instance;
class foo{
  static Singleton(){
    if(!instance){
      instance = new foo();
    }
    return instance;
  }  
  method(){
    this.name = 'single';
    console.log(this.name);
  }
}
 
var a = foo.Singleton();
var b = foo.Singleton();
a.method();       //single
console.log(a === b);  //true

修改this指向生成单例：

var instance;
class foo{
  constructor(){
    if(!instance){
      this.Singleton();
    }
    return instance;
  }
  Singleton(){
    instance = this;
    this.name = 'single';
    this.method = function(){
      console.log(this.name);
    }
  }
}
 
var a = new foo();
var b = new foo();
a.method();       //single
console.log(a === b);  //true

当然除了这两种以外还有别的方式能实例化一个单例。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

javascript,单例模式,javascript,单例模式详解,JS,单例模式

标签：

javascript,单例模式,javascript,单例模式详解,JS,单例模式

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript 单例模式详解及简单实例”

javascript 单例模式详解及简单实例

暂无“javascript 单例模式详解及简单实例”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2025年03月02日

javascript 单例模式详解及简单实例

javascript,单例模式,javascript,单例模式详解,JS,单例模式

js基于myFocus实现轮播图效果

bootstrap 下拉多选框进行多选传值问题代码分析

评论“javascript 单例模式详解及简单实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接