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

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
　　

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

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

赞 (0)

相关推荐

  • 解析Javascript单例模式概念与实例

    解析Javascript单例模式概念与实例

    前言 和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构. 本文将介绍Javascript模式中较为常见和实用的模式--单例模式,主要分为概念和实例部分.在介绍实例的同时也会对代码中额外的知识点进行讲解. 单例模式概念 首先什么是单例模式?可以这样理解:单例模式旨在保证一个类仅有一个实例,并提供一个全局的访问点. 可能有人还是不太理解单例的概念,那么你可

  • 学习JavaScript设计模式(单例模式)

    单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器的window对象.在js开发中,单例模式的用途同样非常广泛.试想一下,当我们单击登录按钮的时候,页面中会出现一个登录框,而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次.因此这个登录浮窗就适合用单例模式. 1.单例模式的使用场景 在使用一种模式之前,我们最好要知道,这种模式的使用场景.用了这么久的单例模式,竟全然不知!用它

  • js单例模式详解实例

    什么是单例? 单例要求一个类有且只有一个实例,提供一个全局的访问点.因此它要绕过常规的控制器,使其只能有一个实例,供使用者使用,而使用着不关心有几个实例,因此这是设计者的责任 复制代码 代码如下: In JavaScript, Singletons serve as a shared resource namespace which isolate implementation code from the global namespace so as to provide a single po

  • Javascript单例模式的介绍和实例

    Javascript单例模式的介绍和实例

    前言 其实和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构. 本文将会介绍Javascript中的单例模式,在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个

  • javascript 单例模式演示代码 javascript面向对象编程

    javascript 单例模式演示代码 javascript面向对象编程

    js的单例写法 JS单例模式 div{height:100px; width:100px; background:#CCC; border:#000 1px solid;} my = new function yangbin() { this.name = "我是单例funnyzak!"; }; function yangbin1(){ this.name = "我是funnyzak!"; } function myname(){ var u = new yangb

  • JavaScript的单例模式 （singleton in Javascript)

    单例模式的基本结构: 复制代码 代码如下: MyNamespace.Singleton = function() { return {}; }(); 比如: 复制代码 代码如下: MyNamespace.Singleton = (function() { return { // Public members. publicAttribute1: true, publicAttribute2: 10, publicMethod1: function() { ... }, publicMethod2

  • 轻松掌握JavaScript单例模式

    定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点: 实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例;  主要用于:全局缓存.登录浮窗等只需要唯一一个实例的时候: 一. 为一个非单例模式对象(如:Demo)实现单例模式的方法:  给Demo添加一个静态方法来实现单例: Demo.getSingle = (function(){ var demo = null; return function(name){ if(!demo){ demo = ne

  • JS模式之单例模式基本用法

    本文实例讲述了JS模式之单例模式基本用法.分享给大家供大家参考.具体如下: //singleton var SingletonTester = (function(){ function Singleton(options){ options = options || {}; this.name = "SingletonTester"; this.pointX = options.pointX || 6; this.pointY = options.pointY || 10; }; v

  • js单例模式的两种方案

    方案一:利用闭包的两个作用,可以变通地读到内部的变量,二是可以让这些变量始终在内存中. 复制代码 代码如下: //方案一     var SingletonTester = (function () {         //单例方法         function Singleton(args) {             var args = args || {};             this.name = 'SingletonTester'; //方法对外的属性,另外一种方式就是返回

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

    JS 单例模式 概要: 单例指一个类只有一个实例,这个类自行创建这个实例. 利用对象字面量直接生成一个单例: var singleton = { prop: 1, method: function(){ console.log(a); //1 } } 严格的说对象字面量可能不算单例模式,生成单例是对象字面量的作用(已经被封装),而单例模式是一个设计模式(需要自行构思或设计). 在类内部用new生成实例的单例模式: var instance; var foo = function(){ if(!i

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • javascript 闭包详解及简单实例应用

    JS 闭包详解及实例: 最近学习JS的基础知识,学习了闭包的知识点,有很多疑惑,这一段时间还是一直有在看闭包的相关知识理解就更深入了一点,下面说说我的理解. function fn(){ var a = 0; return function (){ return ++a; } } 如上所示,上面第一个return返回的就是一个闭包,那么本质上说闭包就是一个函数.那么返回这个函数有什么用呢? 那是因为这个函数可以调用到它外部的a这个变量.其实也就是说,return返回的是这个函数 + a这个变量

  • jQuery extend()详解及简单实例

    jQuery extend()详解及简单实例 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们说的工具方法是指无需实例化就可以调用的函数,如第一段代码:实例

  • JSP 注释的详解及简单实例

    JSP 注释的详解及简单实例

     JSP 注释的详解及简单实例 一 三种格式 二 举例 <body> <h1>大家好</h1> <hr> <!-- 我是HTML注释,在客户端可见 --> <%-- 我是JSP注释,在客户端不可见 --%> <% //单行注释 /*多行注释*/ out.println("大家好,欢迎大家学习JAVAEE开发."); %> <br> 你好,<%=s %><br> x+y

  • mybatis分页插件pageHelper详解及简单实例

    mybatis分页插件pageHelper详解及简单实例 工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.7.5

  • Java File类的详解及简单实例

    Java File类的详解及简单实例 1. File():构造函数,一般是依据文件所在的指定位置来创建文件对象.  CanWrite():返回文件是否可写. CanRead():返回文件是否可读. CompareTo(File pathname):检查指定文件路径间的顺序. Delet():从文件系统内删除该文件. DeleteOnExit():程序顺利结束时从系统中删除文件. Equals(Object obj):检查特定对象的路径名是否相等. Exists():判断文件夹是否存在. GetA

  • JAVA 注解详解及简单实例

    JAVA 注解详解及简单实例 何为注解 注解(Annotation)又称为元数据,在JDK1.5后引入,它的作用是: 生成文档  这是注解的原始用途,可以通过注解生成JavaDoc文档 跟踪代码的依赖性  可以通过注解替代配置文件,简化项目的配置.现有的许多框架都采用这个功能减少自己的配置. 编译检查  在编译时进行格式检查,例如@Override 基础注解 Java目前内置了三种标准注解,以及四种元注解.四种元注解负责创建其他的注解. 三种标准注解 @Override,表示当前的方法覆盖超类中

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • linux 下实现sleep详解及简单实例

    linux 下实现sleep详解及简单实例

    linux 下实现sleep详解及简单实例 sleep: 普通版本 1.基本设计思路: 1>注册SIGALRM信号的处理函数:    2>调用alarm(nsecs)设定闹钟: 3>调⽤pause等待,内核切换到别的进程运行: 4>nsecs秒之后,闹钟超时,内核发SIGALRM给这个进程 ; 5>从内核态返回这个进程的⽤户态之前处理未决信号,发现有SIGALRM信号,其处理函数是sig_alrm; 6> 切换到用户态执行sig_alrm函数,进⼊sig_alrm函数时

随机推荐